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

我试图弄清楚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>

JSFiddle here

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

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

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

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

可能吗？…

最佳答案

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

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

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

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

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

您将需要JavaScript解决方案（请参见here和here）...或CSS媒体查询（请参见here）。

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

关于html - 在包装时使容器收缩以适合子元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59457442/