html - 为什么 flex 元素不缩小超过内容大小？

Question

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

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

观看 video (一开始，第一列是最小的，但是当我调整窗口大小时，它是最宽的列。我只想始终尊重 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 元素的自动最小尺寸

您遇到了 flexbox 默认设置。

flex 项不能小于其内容沿主轴的大小。

默认是...

• 最小宽度:自动
• 最小高度:自动

...分别用于行方向和列方向的 flex 元素。

您可以通过将 flex 元素设置为:

• 最小宽度:0
• 最小高度:0
• overflow: hidden(或任何其他值，visible 除外)

---

flex 盒规范

4.5. Automatic Minimum Size of Flex Items

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1.

关于auto值...

On a flex item whose overflow is visible in the main axis, when specified on the flex item’s main-axis min-size property, specifies an automatic minimum size. It otherwise computes to 0.

换句话说:

• 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 rendering differently in flex-direction: row and flex-direction: column

---

你已经应用了 min-width: 0 并且元素仍然没有缩小？

嵌套 Flex 容器

如果您在 HTML 结构的多个级别上处理 flex 元素，可能需要覆盖默认的 min-width: auto/min-height: auto 在更高级别的元素上。

基本上，具有 min-width: auto 的更高级别的 flex 元素可以防止嵌套在 min-width: 0 下的元素收缩。

例子:

• Flex item is not shrinking smaller than its content
• Fitting child into parent
• white-space css property is creating issues with flex

---

浏览器渲染说明

• Chrome 与 Firefox/Edge

  至少从 2017 年开始，Chrome 似乎要么 (1) 恢复到 min-width: 0/min-height: 0 默认值，要么 ( 2) 在某些情况下基于神秘算法自动应用 0 默认值。 (这可能是他们所说的 intervention 。)因此，许多人看到他们的布局(尤其是所需的滚动条)在 Chrome 中按预期工作，但在 Firefox/Edge 中却没有。此处更详细地介绍了此问题:flex-shrink discrepancy between Firefox and Chrome

• IE11

  如规范中所述，min-width 和 min-height 属性的 auto 值为"new"。这意味着某些浏览器可能仍会默认呈现 0 值，因为它们在值更新之前实现了 flex 布局，并且因为 0 是 min 的初始值-width 和 min-height 在 CSS 2.1 。 One such browser is IE11. 其他浏览器已更新为 flexbox spec 中定义的较新的 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>

jsFiddle