Flexbox: як змусити divs заповнити 100% ширини контейнера без загортання?

Я в процесі оновлення старої inline-blockмоделі сітки, яку я маю, до нової моделі Flexbox, яку я створив. Все працювало нормально, крім однієї маленької зачепки, яка стала дещо зламаною:

У мене є купа повзунків, керованих CSS; отже, там є обгортка, що містить ширину 100%, а всередині інший div: її ширина також 100%, але для неї white-spaceвстановлено значення nowrap. Використовуючи inline-block, це означало, що внутрішні div (які також були встановлені на 100% ширини) не будуть обмежені обмеженнями батьків і переносяться на наступний рядок - вони просто продовжуватимуть витікати з коробки. Це саме те, що я хотів. Однак я не можу змусити це взагалі працювати з flexbox. Для довідки, ось зображення:

І для довідки, ось jsFiddle про те, що працює з вбудованим блоком: http://jsfiddle.net/5zzvqx4b/

... і не працює з Flexbox: http://jsfiddle.net/5zzvqx4b/1/

Я пробував всі види варіацій з flex, flex-basis, flex-wrap, flex-growі т.д. , але і для життя мене я не можу отримати цю роботу.

Зверніть увагу, що я можу змусити його робити те, що хочу, хакі, негнучко, встановивши .boxcontainerширину 200%. Це працює для цього окремого прикладу, але в деяких випадках я не буду заздалегідь знати, скільки буде дочірніх ящиків, і я б волів не вдаватися до вбудованого стилювання кожного елемента, якщо це можливо.

Щоб запобігти усадці гнучких елементів, встановіть коефіцієнт гнучкої усадки на 0:

Коефіцієнт гнучкої усадки визначає, наскільки гнучкий елемент зменшиться відносно решти гнучких елементів у гнучкому контейнері при розподілі негативного вільного простору. Якщо опущено, для нього встановлюється значення 1.

.boxcontainer .box {
  flex-shrink: 0;
}

* {
  box-sizing: border-box;
}
.wrapper {
  width: 200px;
  background-color: #EEEEEE;
  border: 2px solid #DDDDDD;
  padding: 1rem;
}
.boxcontainer {
  position: relative;
  left: 0;
  border: 2px solid #BDC3C7;
  transition: all 0.4s ease;
  display: flex;
}
.boxcontainer .box {
  width: 100%;
  padding: 1rem;
  flex-shrink: 0;
}
.boxcontainer .box:first-child {
  background-color: #F47983;
}
.boxcontainer .box:nth-child(2) {
  background-color: #FABCC1;
}
#slidetrigger:checked ~ .wrapper .boxcontainer {
  left: -100%;
}
#overflowtrigger:checked ~ .wrapper {
  overflow: hidden;
}

<input type="checkbox" id="overflowtrigger" />
<label for="overflowtrigger">Hide overflow</label><br />
<input type="checkbox" id="slidetrigger" />
<label for="slidetrigger">Slide!</label>
<div class="wrapper">
  <div class="boxcontainer">
    <div class="box">
      First bunch of content.
    </div>
    <div class="box">
      Second load  of content.
    </div>
  </div>
</div>

Ви можете використовувати скорочену властивість flex і встановити для нього значення

flex: 0 0 100%;

Ось flex-grow, flex-shrinkі flex-basisв одному рядку. Флексова усадка була описана вище, флекс ріст - це навпаки, а основа флексу - розмір контейнера.

У моєму випадку просто використання flex-shrink: 0не спрацювало. Але додавання flex-grow: 1до цього спрацювало.

.item {
    flex-shrink: 0;
    flex-grow: 1;
}