Warum füllt mein Flexbox-Spaltenuntergeordnetes Element in Chrome nicht 100 % der Höhe aus?

Höhe 100 % bei untergeordneter Flexbox-Spalte

Ihr Problem ist auf einen Konflikt in der Flexbox-Spezifikation zurückzuführen, der sich darauf auswirkt, wie Höhenprozentsätze berechnet werden Chrom. Gemäß der Flexbox-Spezifikation wird, wenn align-self auf stretch eingestellt ist (Standard für Flex-Elemente), der verwendete Wert der Cross-Size-Eigenschaft eines Elements (in diesem Fall Höhe) angepasst. Prozentsätze basieren jedoch auf dem angegebenen Wert der Cross-Size-Eigenschaft des übergeordneten Elements und nicht auf dem verwendeten Wert.

In Ihrem Beispiel ist das CSS für das .flex-Element auf „flex: 1“ festgelegt, was bedeutet, dass es Wird den gesamten verfügbaren Platz beanspruchen. Das .flex-child-Element hat eine Höheneinstellung von 100 %, was bedeutet, dass es 100 % der verfügbaren Höhe einnimmt, die auf der Grundlage der angegebenen Höhe des Flex-Elternteils berechnet wird. Allerdings wird die Höhe für .flex nicht explizit festgelegt, daher ist sie standardmäßig auf „Auto“ eingestellt. Daher interpretiert Chrome die .flex-child-Höhe als 100 % von auto, weshalb nicht das gesamte .flex-Element ausgefüllt wird.

Um dieses Problem zu beheben, müssen Sie Folgendes tun:

1. Setzen Sie .flex so ein, dass Folgendes angezeigt wird: flex; um sicherzustellen, dass es als Flex-Container erkannt wird.
2. Entfernen Sie die Höhe: 100 %; Anweisung von .flex-child.

Dadurch kann .flex-child die volle Höhe seines übergeordneten .flex-Elements ausfüllen.

Diese Lösung funktioniert jedoch möglicherweise nicht, wenn Sie Ich versuche, nur einen Teil von .flex zu füllen. In solchen Fällen müssen Sie eine Problemumgehung anwenden, z. B. das Hinzufügen eines zweiten .spacer-Kinds zu .flex mit flex: 1 und das Festlegen von .flex-child auf flex: 9. Obwohl dies eine weniger elegante Option ist, handelt es sich um eine Problemumgehung, die es zu beheben gilt die Spezifikationsbesonderheit.

Es ist zu beachten, dass dieses Problem spezifisch für Chrome ist und in anderen Browsern möglicherweise nicht auftritt. Es besteht die Hoffnung, dass zukünftige Updates der Flexbox-Spezifikation diese Inkonsistenz beheben und die browserübergreifende Kompatibilität verbessern.

Das obige ist der detaillierte Inhalt vonWarum füllt mein Flexbox-Spaltenuntergeordnetes Element in Chrome nicht 100 % der Höhe aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!