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

312

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>

tomas657
quelle

Antworten:

537

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


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:


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

jsFiddle

Michael Benjamin
quelle
2
Ich hatte ein übergeordnetes <fieldset> -Tag viel höher im Dom, das das gleiche Problem verursachte. Durch Setzen der Min-Breite auf 0 wurde das Problem behoben.
Jan Swart
1
Irgendwelche Gedanken zu diesem Thema : stackoverflow.com/a/36247448/8620333 .. Ich fand, dass es mit min-widthallen Details zu tun hat, aber nicht wirklich sicher ist.
Temani Afif
3
Anscheinend hat Chrome das Verhalten in Version 73 so geändert, dass es nicht kleiner als der Inhalt ist.
maccam94
2
Gleiches Update funktioniert mit min-height: 0;. Ich musste versuchen, dies für mehrere höhere Elemente im Baum einzustellen.
Ben Wheeler
Ich musste an min-height: 0;10 Stellen einstellen , damit es funktioniert. Danke, danke, danke für den tollen Tipp!
dave0688