Flexbox: как получить divs для заполнения 100% ширины контейнера без упаковки?

Сейчас я обновляю старую модель сетки на основе inline-block, которую я создаю для нового Flexbox, созданного мной. Все отлично работало, кроме одной маленькой хватки, которая стала немного разбойником:

У меня есть куча управляемых CSS слайдеров; поэтому существует содержащая оболочка со 100% шириной, а внутри - еще один div: ее ширина также равна 100%, но ее white-space устанавливается на nowrap. Используя inline-block, это означало, что внутренние div (которые также были установлены на 100% ширины) не были бы связаны ограничениями их родителей и завертываются на следующую строку - они просто будут выходить из коробки. Это именно то, чего я хотел. Тем не менее, я не могу заставить это работать вообще с flexbox. Для справки, здесь изображение:

Flexbox problem

И для справки, здесь jsFiddle того, что работает с встроенным блоком: http://jsfiddle.net/5zzvqx4b/

... и не работает с Flexbox: http://jsfiddle.net/5zzvqx4b/1/

Я пробовал все варианты с flex, flex-basis, flex-wrap, flex-grow и т.д., но для жизни меня я не могу заставить это работать.

Обратите внимание, что я могу заставить его делать то, что я хочу, взломанным, негибким образом, установив ширину .boxcontainer в 200%. Это работает для этого единственного примера, но в некоторых случаях я не буду заранее знать, сколько ящиков будет там, и я бы предпочел не прибегать к встроенному стилю для каждого элемента, если это возможно.

Ответы

Ответ 1

Чтобы предотвратить сжатие элементов flex, установите коэффициент сжатия flex на 0:

Фактор flex определяет, насколько flex item будет сжимается относительно остальной части flex items в flex контейнер, когда распределяется отрицательное свободное пространство. Когда опущено, это установлен на 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>

Ответ 2

Вы можете использовать свойство сокращенного flex и установить его на

flex: 0 0 100%;

Это flex-grow, flex-shrink и flex-basis в одной строке. Фрикционная усадка была описана выше, гибкое растение - противоположное, а гибкая основа - размер контейнера.