Flexbox：如何使div无需包装即可填充容器宽度的100％？

Question 1

我正在将必须使用的旧inline-block的网格模型更新为我创建的较新的Flexbox。除了一点点障碍之外，一切都运转良好，这已成为一个大问题：

我有一堆CSS控制的滑块；因此，有一个宽度为100％的包含包装器，而内部是另一个div：其宽度也是100％，但将其white-space设置为nowrap。使用inline-block，这意味着内部div（也设置为100％宽度）将不受父母约束的约束，并缠绕到下一行-他们将继续进行操作。这正是我想要的。但是，我根本无法使它与flexbox一起使用。供参考，这是一张图片：

Flexbox问题

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

...并且无法与Flexbox配合使用：http : //jsfiddle.net/5zzvqx4b/1/

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

请注意，我可以通过将.boxcontainerwidth设置为来强制它以一种怪异的，不灵活的方式执行我想要的操作200%。这适用于单个示例，但是在某些情况下，我事先不知道会有多少个子框，如果可能的话，我宁愿不对每个元素采用内联样式。

Question 2

为防止弹性项目收缩，请将弹性收缩因子设置为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>

展开摘要

Question 3

您可以使用简写的flex属性并将其设置为

flex: 0 0 100%;

那是flex-grow，flex-shrink和flex-basis在一行。上面描述了弯曲收缩，弯曲生长是相反的，弯曲基数是容器的大小。

Question 4

就我而言，仅使用flex-shrink: 0是行不通的。但是添加flex-grow: 1它是可行的。

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