为什么弹性项目不会缩小到超过内容大小？

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: border-box; min-width: 0; min-height: 0; }

有人知道是否会产生任何奇怪的后果吗？在混合使用上述方法的几年里我还没有遇到过任何问题。事实上，我想不出任何我想要从内容向外布局到 Flex/Grid 的情况，而不是从 Flex/Grid 向内布局到内容的情况 --- 当然，如果它们存在，它们也是罕见的。所以这感觉像是一个糟糕的默认值。但也许我错过了一些东西？

Answer 2

Flex 项目的自动最小尺寸

您遇到了 Flexbox 默认设置。

弹性项目不能小于其内容沿主轴的尺寸。

默认值是...

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

...分别用于行方向和列方向的弹性项目。

您可以通过将弹性项目设置为来覆盖这些默认值：

• 最小宽度：0
• 最小高度：0
• 溢出：隐藏（或任何其他值，可见除外）

---

Flexbox 规范

关于auto值...

换句话说：

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

还有...

• 最小尺寸算法仅适用于主轴。
• 例如，行方向容器中的 Flex 项目默认不会获得 min-height: auto。
• 有关更详细的说明，请参阅此帖子：
  • 弯曲方向：行和弯曲方向：列的最小宽度呈现方式不同

---

你已经应用了 min-width: 0 但项目仍然没有缩小？

嵌套 Flex 容器

如果您要处理 HTML 结构的多个级别上的 Flex 项目，则可能需要覆盖默认的 min-width: auto / min-height: auto 位于更高级别的项目上。

基本上，具有 min-width: auto 的更高级别的 Flex 项目可以防止使用 min-width: 0 嵌套在下面的项目收缩。

示例：

• Flex 项目没有缩小到小于其内容
• 让子项适合父项
• 空白 CSS 属性会导致 Flex 出现问题

---

浏览器渲染说明

• Chrome 与 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 是 min 的初始值CSS 2.1。 IE11 就是这样的浏览器。 其他浏览器已更新到较新的 flexbox 规范 值a>.

---

修改后的演示

.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>