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

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>

原文由 tomas657 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

弹性项目的自动最小尺寸

您遇到了 flexbox 默认设置。

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

默认值为…

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

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

您可以通过将弹性项目设置为：

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

---

弹性盒规范

4.5.弹性项目的自动最小尺寸

为了给弹性项目提供更合理的默认最小尺寸，本规范引入了一个新的 auto 值作为 CSS 中定义的 min-width 和 min-height 属性的初始值2.1。

关于 auto 值…

在主轴上 overflow 是 visible 的弹性项目上，当在弹性项目的主轴最小尺寸属性上指定时，指定 _自动最小尺寸_。否则计算为 0 。

换句话说：

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

和…

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

---

您已经应用了 min-width: 0 并且项目仍然没有缩小？

嵌套的 Flex 容器

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

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

例子：

• Flex 项目不会缩小到小于其内容
• 让孩子适应父母
• 空白 css 属性正在创建 flex 问题

---

浏览器渲染说明

• Chrome 与 Firefox / Edge

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

• IE11

如规范中所述， min-width 和 min-height 属性的 auto 值是“新的”。这意味着某些浏览器可能仍会默认呈现 0 值，因为它们在值更新之前实现了 flex 布局，并且因为 0 是 --- min-width 的初始值 --- 和 min-height 在 CSS 2.1 中。 一种这样的浏览器是 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>

jsFiddle

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我发现多年来，对于 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 向内布局到内容的情况 — 如果它们存在，它们肯定是罕见的。所以这感觉像是一个糟糕的默认设置。但也许我错过了什么？

原文由 voracity 发布，翻译遵循 CC BY-SA 4.0 许可协议