为什么弹性项目无法缩减至小于内容大小？

Question

我有4个flexbox列，一切都正常，但是当我向一列添加一些文本并将其设置为大字体大小时，由于flex属性，它使得该列比应该更宽。

我尝试使用word-break: break-word，它有所帮助，但是当我将列调整为非常小的宽度时，文本中的字母会被分成多行（每行一个字母），但是该列的宽度不会小于一个字母的大小。

观看这个视频（在开始时，第一列最小，但是当我调整窗口大小时，它变成了最宽的列。我只想始终遵守flex设置；flex大小为1：3：4：4）

我知道，将字体大小和列填充设置为较小的值会有所帮助...但是还有其他解决方案吗？

我不能使用overflow-x: hidden。

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

Answer 1

我发现这在过去的几年里对于flex和grid都多次给我带来了麻烦，所以我建议以下操作：

* { min-width: 0; min-height: 0; }

如果需要这种行为，只需使用min-width: auto或min-height: auto。

实际上，还可以加入box-sizing以使所有布局更合理：

* { box-sizing: border-box; min-width: 0; min-height: 0; }

有人知道是否存在任何奇怪的后果吗？在使用上述方法的几年中，我没有遇到任何问题。实际上，我想不出任何情况下我会希望从内容向外布局到flex/grid，而不是从flex/grid向内布局到内容 --- 而且如果这种情况存在，那肯定很少见。所以这感觉像是一个糟糕的默认设置。但也许我漏掉了什么？

Answer 2

Flex项目的自动最小尺寸

您遇到了flexbox的默认设置。

Flex项目在主轴上不能小于其内容的尺寸。

默认设置为...

• min-width: auto
• min-height: auto

...分别适用于行方向和列方向的flex项目。

您可以通过设置flex项目为：

• min-width: 0
• min-height: 0
• overflow: hidden（或任何其他值，除了visible）

---

Flexbox规范

关于auto值...

换句话说：

• min-width: auto和min-height: auto默认仅在overflow为visible时适用。
• 如果overflow的值不是visible，则min-size属性的值为0。
• 因此，overflow: hidden可以替代min-width: 0和min-height: 0。

以及...

• 最小尺寸算法仅适用于主轴。
• 例如，行方向容器中的flex项目默认不会获得min-height: auto。
• 有关更详细的解释，请参阅此帖子：
  • min-width在flex-direction: row和flex-direction: column中渲染不同

---

您已经应用了min-width: 0，但项目仍然不会缩小？

嵌套的Flex容器

如果您在HTML结构的多个层次上处理flex项目，则可能需要覆盖较高级别项目上的默认min-width: auto / min-height: auto。

基本上，具有min-width: auto的较高级别flex项目可以阻止下方嵌套的具有min-width: 0的项目缩小。

示例：

• Flex项目无法缩小到小于其内容
• 将子元素适应父元素
• white-space CSS属性与flex布局冲突

---

浏览器渲染注意事项

• Chrome vs. Firefox / Edge

  自2017年以来，Chrome似乎要么（1）恢复到min-width: 0 / min-height: 0的默认值，要么（2）根据某个神秘的算法在某些情况下自动应用0的默认值。（这可能是他们所谓的干预。）因此，许多人在Chrome中看到他们的布局（尤其是期望的滚动条）按预期工作，但在Firefox / Edge中不起作用。有关更详细的信息，请参阅这里：Firefox和Chrome之间的flex-shrink差异

• IE11

  如规范中所述，min-width和min-height属性的auto值是“新的”。这意味着某些浏览器可能仍然默认呈现0值，因为它们在值更新之前实现了flex布局，并且因为0是CSS 2.1中min-width和min-height的初始值。IE11是其中之一。其他浏览器已经更新到了在flexbox规范中定义的较新的auto值。

---

修订后的演示

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>