min-width: auto bei Flexitems und gefloaten Elementen

Ein Grund, warum sich Flexitems, die in einer Reihe dargestellt werden, anders verhalten als Elemente, die beispielsweise gefloatet werden, liegt auch an der initialen Angabe von min-width. min-width bestimmt die Mindestbreite, soweit klar. Aber die Wirkung ist bei normalen Blockelementen anders als bei Flexitems. Dazu und wie man mehrere Flexitems auf dieselbe Breite bekommt ….

Prinzipiell gilt für min-width/min-height:

  • Der initiale Werte von min-width und min-height ist inzwischen auto. Aus Gründen der Abwärtskompabilität ist er 0, außer vom Layoutmodul anders angegeben. „For min-width/min-height, specifies an automatic minimum size. Unless otherwise defined by the relevant layout module, however, it resolves to a used value of 0.“ (https://drafts.csswg.org/css-sizing-3/#valdef-width-auto.)
  • Das heißt, wenn man Elemente beispielsweise floatet, und nichts für min-width angibt, so hat min-width den Wert auto, was als 0 interpretiert wird.
  • Bei Flexbox wird min-width: auto anders interpretiert, nicht als 0,  sondern als „content-based minimum size“ (https://drafts.csswg.org/css-flexbox-1/#min-size-auto) – außer bei scrollbaren Elementen.

Deutlich wird das an Beispielen.

min-width: auto bei gefloateten Elementen

Wenn ich vier Elemente auf eine Breite von 25% setze und sie floate – dann sind sie 25% breit, auch wenn der Inhalt etwas anderes verlangen würde.

.container>* {
width: 25%;
float:left;
min-width: auto;
}

Man sieht das im folgenden Beispiel an einem sehr langen Wort, das nicht umbrochen werden kann und deswegen aus dem Element herausragt.

alle Elemente sind gleich groß, der Text ragt aus letztem heraus

ausprobieren

Fazit: min-width ist hier auto, was als 0 interpretiert wird und funkt nicht rein.

min-width: auto bei Flexitems

Im folgenden Beispiel gehe ich von folgender Flexdefinition aus:

.container {
display: flex;
flex-direction: row; /* Standard */
}

Wenn ich möchte, dass alle vier Flexitems dieselbe Breite haben, kann ich versuchen:

.container > * {
flex-basis: 25%;
flex-grow: 0;
flex-shrink: 0;
min-width: auto;
}

Müsste doch klappen? Denn die Items dürfen weder größer noch kleiner werden – flex-grow und flex-shrink sind auf 0. Aber das funktioniert nicht, weil die Mindestbreite wirkt, die auf dem Inhalt basiert. Die sieht man deutlich, wenn man ein Element mit mehr Textinhalt (einem sehr langen Wort) nimmt, das nicht umbrochen werden kann.

Das vierte Element mit langem Wort ist breiter

Wenn ich möchte, dass alle Elemente wirklich gleich breit sind, benötige ich in diesem Fall noch min-width: 0:

.container > * {
flex-basis: 25%;
flex-grow: 0;
flex-shrink: 0;
min-width: 0;
}

alle Elemente sind gleich breit - beim letzten ragt der Text heraus

Ich könnte natürlich auch overflow nehmen, um den Inhalt abzuschneiden oder max-width: 25% würde in diesem Fall auch das Gewünschte bringen.

min-width + Flexbox-Beispiele zum Ausprobieren

Nun der Disclaimer

Das Standardverhalte von Flexitems ist eigentlich super schlau. So ist dafür gesorgt, dass die Inhalte immer ganz zu sehen sind. Deswegen muss man sich genau überlegen, ob man wirklich min-width: 0 braucht. Denn dann macht man aus Flexitems eigentlich No-more-Flexitems.

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.