Warum können Flex-Elemente nicht auf weniger als die Inhaltsgröße verkleinert werden?

Question

Ich habe 4 Flexbox-Spalten und alles funktioniert einwandfrei, aber wenn ich einer Spalte 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 versucht, word-break: break-word zu verwenden, 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 Breite der Spalte wird nicht kleiner als die Größe eines Buchstabens sein.

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

Ich weiß, dass es hilfreich ist, die Schriftgröße und den Spaltenabstand auf kleinere Werte zu setzen ... 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以使所有布局更合理：

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