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

Question

Ich habe 4 Flexbox-Spalten und alles funktioniert einwandfrei. Wenn ich jedoch einer Spalte Text hinzufüge und eine große Schriftgröße einstelle, wird die Spalte aufgrund der Flex-Eigenschaft breiter, als es sein sollte.

Ich habe versucht, es zu verwenden, word-break: break-wordund es hat geholfen, aber wenn ich die Größe der Spalte auf eine sehr kleine Breite ändere, werden die Buchstaben im Text in mehrere Zeilen unterteilt (ein Buchstabe pro Zeile), und dennoch wird die Spalte nicht kleiner als eine Buchstabengröße .

Sehen Sie sich dieses Video an (zu Beginn ist die erste Spalte die kleinste, aber wenn ich die Größe des Fensters geändert habe, ist es die breiteste Spalte. Ich möchte nur immer die Flex-Einstellungen berücksichtigen; Flex-Größen 1: 3: 4: 4)

Ich weiß, dass es hilfreich ist, Schriftgröße und Spaltenauffüllung auf kleiner zu setzen ... aber gibt es eine andere Lösung?

Ich kann nicht verwenden 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

Die automatische Mindestgröße von Flex-Elementen

Sie stoßen auf eine Flexbox-Standardeinstellung.

Ein Flex-Element darf nicht kleiner sein als die Größe seines Inhalts entlang der Hauptachse.

Die Standardeinstellungen sind ...

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

... für flexible Elemente in Zeilen- bzw. Spaltenrichtung.

Sie können diese Standardeinstellungen überschreiben, indem Sie Flex-Elemente auf Folgendes setzen:

• min-width: 0
• min-height: 0
• overflow: hidden(oder ein anderer Wert, außer visible)

---

Flexbox-Spezifikation

4.5. Automatische Mindestgröße von Flex-Elementen

Um eine angemessene Standardmindestgröße für Flex - Elemente zu bieten, stellt diese Spezifikation einen neuen autoWert als Anfangswert der min-widthund min-heightin CSS 2.1 definierten Eigenschaften.

In Bezug auf den autoWert ...

Gibt für ein Flex-Element, dessen Element overflowsich visiblein der Hauptachse befindet, eine automatische Mindestgröße an , wenn dies in der Min-Size-Eigenschaft der Hauptachse des Flex-Elements angegeben ist . Es wird sonst berechnet 0.

Mit anderen Worten:

• Die min-width: autound min-height: autoVoreinstellungen gelten nur dann , wenn overflowist visible.
• Ist dies nicht der overflowFall, lautet visibleder Wert der Eigenschaft min-size 0.
• Daher overflow: hiddenkann ein Ersatz für min-width: 0und sein min-height: 0.

und...

• Der Mindestgrößenalgorithmus gilt nur für die Hauptachse.
• Beispielsweise wird ein Flex-Element in einem Container in Zeilenrichtung nicht min-height: autostandardmäßig abgerufen.
• Eine ausführlichere Erklärung finden Sie in diesem Beitrag:
  • Rendering mit minimaler Breite in Flex-Richtung: Zeile und Flex-Richtung: Spalte unterschiedlich

---

Sie haben min-width: 0 angewendet und der Artikel schrumpft immer noch nicht?

Verschachtelte Flex-Container

Wenn Sie mit Flex-Elementen auf mehreren Ebenen der HTML-Struktur arbeiten, müssen Sie möglicherweise die Standard- min-width: auto/ min-height: autoOn-Elemente auf höheren Ebenen überschreiben .

Grundsätzlich kann ein übergeordnetes Flex-Element mit min-width: autoverhindern, dass die unten mit verschachtelten Elemente verkleinert werden min-width: 0.

Beispiele:

• Das Flex-Element schrumpft nicht kleiner als sein Inhalt
• Kind in Eltern einpassen
• Die CSS-Eigenschaft für Leerzeichen verursacht Probleme mit Flex

---

Browser-Rendering-Hinweise

• Chrome vs. Firefox / Edge

  Seit mindestens 2017 scheint es , dass Chrome entweder (1) das Zurücksetzen auf die min-width: 0/ min-height: 0Standardwerte, oder (2) automatisch die Anwendung von 0Standardeinstellung in bestimmten Situationen auf der Grundlage eines Geheimnis - Algorithmus. (Dies könnte als Intervention bezeichnet werden .) Infolgedessen sehen viele Benutzer, dass ihr Layout (insbesondere die gewünschten Bildlaufleisten) in Chrome wie erwartet funktioniert, jedoch nicht in Firefox / Edge. Dieses Problem wird hier ausführlicher behandelt: Flex-Shrink-Diskrepanz zwischen Firefox und Chrome

• IE11

  Wie in der Spezifikation angegeben, ist der autoWert für die Eigenschaften min-widthund min-height"neu". Dies bedeutet, dass einige Browser möglicherweise weiterhin 0standardmäßig einen Wert rendern , da sie das Flex-Layout implementiert haben, bevor der Wert aktualisiert wurde, und weil dies 0der Anfangswert für min-widthund min-heightin CSS 2.1 ist . Ein solcher Browser ist IE11. Andere Browser wurden auf den neueren autoWert aktualisiert, der in der Flexbox-Spezifikation definiert ist .

---

Überarbeitete Demo

.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

Answer 2

Ich stelle fest, dass mich dies im Laufe der Jahre wiederholt sowohl für Flex als auch für Grid gebissen hat, daher werde ich Folgendes vorschlagen:

* { min-width: 0; min-height: 0; }

und dann einfach verwenden min-width: autooder min-height: autowenn Sie dieses Verhalten benötigen.

In der Tat, werfen Sie auch die Box-Größe ein, um alle Layouts vernünftiger zu machen:

* { box-sizing: border-box; min-width: 0; min-height: 0; }

Weiß jemand, ob es irgendwelche merkwürdigen Konsequenzen gibt? Ich habe seit einigen Jahren nichts mehr erlebt, als ich eine Mischung aus den oben genannten verwendet habe. Tatsächlich kann ich mir keine Fälle vorstellen, in denen ich von Inhalten nach außen zum Flex / Grid anstatt nach Flex / Grid nach innen zum Inhalt gestalten möchte - und wenn sie existieren, sind sie sicherlich selten. Das fühlt sich also wie ein schlechter Standard an. Aber vielleicht fehlt mir etwas?