Warum schrumpfen flexible Elemente nicht über die Inhaltsgröße hinaus?

Question

Ich habe 4 Flexbox-Spalten und alles funktioniert einwandfrei, aber wenn ich der Spalte etwas Text hinzufüge und sie auf eine große Schriftgröße einstelle, wird die Spalte aufgrund der Flex-Eigenschaft breiter, als sie sein sollte.

Ich habe es mit word-break:break-word versucht und es hat geholfen, aber als ich die Spaltenbreite auf eine sehr kleine Breite geändert habe, wurden die Buchstaben im Text in mehrere Zeilen aufgeteilt (eine). (Buchstabe pro Zeile), aber die Spaltenbreite darf nicht kleiner als die Größe eines Buchstabens sein.

Sehen Sie sich dieses Video an (Anfangs ist die erste Spalte die kleinste, aber wenn ich die Größe des Fensters ändere, ist sie die breiteste Spalte. Ich möchte einfach immer die Flex-Einstellungen respektieren; Flex-Größe 1:3:4:4)

Ich weiß, es würde helfen, die Schriftgröße und den Spaltenabstand kleiner zu machen ... aber gibt es eine andere Lösung?

Ich kann overflow-x:hidden nicht verwenden.

JSFiddle

.container {
  Anzeige: Flex;
  Breite: 100 %
}
.col {
  Mindesthöhe: 200 Pixel;
  Polsterung: 30px;
  Wortbruch: Wortbruch
}
.col1 {
  Flex: 1;
  Hintergrund: orange;
  Schriftgröße: 80px
}
.col2 {
  Flex: 3;
  Hintergrund: gelb
}
.col3 {
  Flex: 4;
  Hintergrund: himmelblau
}
.col4 {
  Flex: 4;
  Hintergrund: rot
}

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