min-width: auto bei Flexitems und gefloaten Elementen
Geschrieben am:
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
undmin-height
ist inzwischenauto
. 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 hatmin-width
den Wertauto
, 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.
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.
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;
}
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.