Flexbox：如何让divs填充100％的容器宽度而不包装？

Question

我正在更新基于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%，以一种黑客，不灵活的方式执行我想要的操作。这适用于这个单独的例子，但在某些情况下我不会事先知道会有多少个子盒子，如果可能的话，我宁愿不在每个元素上使用内联样式。

Answer 1

要防止弹性项目缩小，请将flex shrink factor设置为0：

  

flex缩小系数决定了flex item的含义   相对于flex中flex items的其余部分缩小   分配负空闲空间时的容器。省略时，它是   设为1.

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

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用速记flex属性并将其设置为

flex: 0 0 100%;

一行中有flex-grow，flex-shrink和flex-basis。上面描述了柔性收缩，柔性增长是相反的，而柔性基础是容器的大小。

Answer 3

就我而言，仅使用flex-shrink: 0无效。但是添加flex-grow: 1就可以了。

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