Flexbox: how to get divs to fill up 100% of the container width without wrapping?

我正在更新一个旧的基于 inline-block的网格模型，我有一个新的 Flexbox 一个我创建的过程。一切都很顺利，除了一个小问题，这个问题有点破坏了协议:

我有一堆 CSS 控制的滑块; 所以有一个包含100% 宽度的包装器，里面是另一个 div: 它的宽度也是100% ，但它的 white-space被设置为 nowrap。使用 inline-block，这意味着内部 div (将还有设置为100% 宽度)将不会受到父节点的约束而包装到下一行——它们将继续从盒子中流出。这正是我想要的。然而，我不能得到这个工作在所有的柔性箱。作为参考，这里有一张图片:

Flexbox problem

作为参考，下面是使用 inline-block 的 jsFiddle: http://jsfiddle.net/5zzvqx4b/

... 和没有与 Flexbox: http://jsfiddle.net/5zzvqx4b/1/合作

我已经尝试了各种变化与 flex，flex-basis，flex-wrap，flex-grow等，但对我的生活，我不能得到这个工作。

注意，我通过将 .boxcontainer的宽度设置为 200%，强制可以以一种古怪的、不灵活的方式做我想做的事情。这对于这个单独的示例是有效的，但是在某些情况下，我不会事先知道有多少个子框，而且如果可能的话，我宁愿不在每个元素上使用内联样式。

252503

小开

最佳答案

为了防止伸缩项目收缩，将弯曲收缩因子弯曲收缩因子设置为 0:

flex shrink factor决定多少弹性项目将收缩相对于其余的弹性物品在弯曲 container when negative free space is distributed. When omitted, it is 设置为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>