在包装时使容器收缩以适合子元素

Question

我试图弄清楚flexbox的工作原理（理应工作吗？），如下所示：

.holder {

  width: 500px;

  background: lightgray;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  flex-wrap: nowrap;

}

.v2 {

  width: 320px;

}

.child {

  display: inline-block;

  border: 1px solid black;

  padding: 30px 0px;

  text-align: center;

}


<div class="holder">

  <div class="child">At a glance</div>

  <div class="child">After coverage ends</div>

  <div class="child">Forms &amp; documents</div>

</div>

<br>

<br>

<div class="holder v2">

  <div class="child">At a glance</div>

  <div class="child">After coverage ends</div>

  <div class="child">Forms &amp; documents</div>

</div>

<br>

<br>

<div class="holder v2">

  <div class="child">At a

    <br>glance</div>

  <div class="child">After coverage

    <br>ends</div>

  <div class="child">Forms &amp;

    <br>documents</div>

</div>

问题是，当有足够的空间容纳元素时，我会得到一个很好的紧身儿童，它们之间的间距均匀。（第一，顶部div块）

但是，如果没有足够的空间并且儿童中的文字开始换行，则所有内容都会朝着怪异的方向前进-
儿童不再紧密贴合，即使在换行后，flex子童周围也有足够的空间，因为不再合适，实际上环绕操作实际上也没有机会工作（第二个div块）

但是，如果我在发生自动换行的地方添加了手动换行，则一切都会按照“应该”的方式进行布局……（底部，第三个方框）

我想要的是始终让孩子们紧紧地放在盒子里（黑色边框），剩下的空间将均匀地分布在它们之间，而无需我添加手动换行符（在我的情况下这不是一种选择） ）

可能吗？…

Answer 1

在CSS中，父容器不知道其子容器何时包装。因此，它会继续缩放其大小，而忽略内部发生的事情。

换句话说，浏览器在初始级联上渲染容器。子包装时，它不会重排文档。

这就是为什么容器不收缩包装较窄的布局的原因。就像没有包裹一样，它继续进行下去，如右边的保留空间所证明的。

水平空白区域的最大长度是容器预期在其中存在的元素的长度。

在下面的演示中，可以在水平调整窗口大小时看到空白的来来去去：DEMO

在处理换行文本时，text-align: right在某些情况下，将其放在容器上可能会有所帮助。