Höhe 100 % bei untergeordneten Flexbox-Spalten funktioniert nicht: Ein Chrome-Problem
In Flexbox wird erwartet, dass untergeordnete Elemente die verfügbare Höhe ausfüllen wie durch die Eigenschaft height:100% angegeben. Dieses Verhalten wird jedoch in Chrome unterbrochen, wenn das übergeordnete Element eine Flexbox-Spalte ist.
Im bereitgestellten Beispiel zielt der folgende Code darauf ab, ein Flexbox-Spaltenlayout zu erstellen:
.flexbox { display: flex; flex-direction: column; height: 100%; }
Und das Das untergeordnete Element ist so eingestellt, dass es die verfügbare Höhe ausfüllt:
.flex-child { height: 100%; }
In Chrome reagiert das untergeordnete Element jedoch nicht auf die Eigenschaft height:100% und belässt es bei einem undefinierte Höhe.
Lösung:
Das Problem kann durch folgende Änderung behoben werden:
Erklärung:
Flexbox folgt der Spezifikation genau . Der align-self: stretch-Wert, der Standardwert für gebogene Elemente, ändert nur den „verwendeten“ Wert der Cross-Size-Eigenschaft (in diesem Fall die Höhe), nicht ihren „spezifizierten“ Wert. Prozentsätze hingegen werden basierend auf dem angegebenen Wert der Cross-Size-Eigenschaft des übergeordneten Elements berechnet.
Da .flex keine angegebene Höhe hat, wird versucht, height: 100 % für .flex festzulegen. child ergibt 100 % der nicht spezifizierten Höhe von .flex, was im Wesentlichen „auto“ ist. Dies führt dazu, dass der Browser die Absicht falsch interpretiert.
Indem wir .flex auf display:flex einstellen, zwingen wir den Browser, das Flexbox-Layout zu verwenden, um sicherzustellen, dass die Elemente korrekt angeordnet sind. Darüber hinaus ermöglicht das Entfernen der height: 100%-Eigenschaft für .flex-child, dass das Element die angegebene Höhe seines übergeordneten Elements .flex erbt.
Einschränkungen:
While Diese Lösung eignet sich zum Ausfüllen des gesamten Bereichs von .flex. Sie funktioniert möglicherweise nicht, wenn nur ein Teil von .flex ausgefüllt werden soll. In solchen Fällen kann eine Problemumgehung mithilfe der absoluten Positionierung oder mehrerer untergeordneter Flexboxen erforderlich sein.
Das obige ist der detaillierte Inhalt vonWarum funktioniert „Höhe: 100 %' bei einer untergeordneten Flexbox-Spalte in Chrome nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!