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

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>

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 vernünftigere Standard-Mindestgröße für Flex-Elemente bereitzustellen, wird in dieser Spezifikation ein neuer autoWert als Anfangswert der in CSS 2.1 definierten min-widthund min-height-Eigenschaften eingeführt.

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 Flex-Element höherer Ebene mit min-width: autoverhindern, dass Elemente, die unten mit verschachtelt sind, verkleinert werden min-width: 0.

Beispiele:

• Das Flex-Element schrumpft nicht kleiner als sein Inhalt
• Kind in Eltern einpassen
• Die White-Space-CSS-Eigenschaft 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