Html 使容器收缩以在子元素包裹时适合它们

我试图找出flexbox在以下情况下如何工作（应该工作？…）：

.holder{
宽度：500px；
背景：浅灰色；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
柔性包装：nowrap；
}
.v2{
宽度：320px；
}
.孩子{
显示：内联块；
边框：1px纯黑；
填充：30px 0px；
文本对齐：居中；
}

一瞥
保险期结束后
表格及；文件




一瞥
保险期结束后
表格及；文件




至少

一瞥
保险后

结束
表格及；

文件

块的行为之所以如此，是因为CSS呈现

在fiddle中的第一种情况下，浏览器不知道块对于其内容何时变得太小。因此，它会不断拉伸，直到达到最大值，然后渲染文本

在上一个示例中，您告诉浏览器在何处断开，以便它知道图元不应变宽

---

您可以轻松解决此问题的唯一方法是自己设置断点。

在CSS中，父容器不知道其子容器何时换行。因此，它继续扩展其大小，而忽略了内部的情况

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

这就是为什么容器不会收缩包装较窄的布局。它只是继续，好像什么都没有包装，正如右边保留的空间所证明的那样

水平空白的最大长度是容器期望位于其中的元素的长度

在下面的演示中，当窗口水平调整大小时，可以看到空白的出现和消失：

您需要一个JavaScript解决方案（请参阅和）。。。或CSS媒体查询（请参阅）

在处理换行文本时，容器上的“文本对齐：右”在某些情况下可能会有所帮助。

请仔细查看我在其中更改的内容：

• .holder

  宽度

  到

  最大宽度

  （在

  .v

  类中）
• 将

  .holder

  修改为

  环绕

  并在其子项周围留出空间
• 为清晰起见，又增加了两个

  .v

  类
• 删除了

  
  的
  

• 而且，最重要的是，

  flex:0

  添加到

  .child

Flexbox几乎总是需要设置

max width

，这比

width

更灵活。 根据您需要

.child

ren的行为方式，在

flex:0

中修改

flex-grow

和

flex-shorn

，以满足您的需要。（flex:10的结果看起来也不错）

…不需要Javascript

---

更新确实帮助我了解了FBL…

如果您正在寻找仅CSS的解决方案，您可以使用类似于

宽度：100px

设置子对象的最小宽度，并

flex:auto使其增长

例如：

（注意，这只在Chrome上测试过）
谢谢！我担心类似的事情可能会发生…仍然希望存在一些智能黑客，因为这看起来是一种相当普遍的情况…我们在工作中遇到了一个类似的问题，我们希望在文本旁边有一个图标：。只是我们也碰到了一个问题，即块始终呈现全宽，但有很多空白。我可以问一下“FBL”代表什么吗？缩略语让事情变得比现在更混乱。我猜F代表Flex，B代表Box，但我不知道其余的是什么。它代表“FlexibleBox布局”。迟到的回答我知道：）