Warum funktioniert „Höhe: 100 %' bei untergeordneten Flexbox-Spalten in Chrome nicht?

Höhe 100 % funktioniert nicht bei untergeordneten Flexbox-Spalten: Browserspezifischer Fehler

Sie haben ein Problem mit untergeordneten Elementen innerhalb einer Flexbox-Spalte reagieren nicht auf Höhenprozentsätze. Dieses Problem wurde in Chrome festgestellt und betrifft möglicherweise keine anderen Browser.

In Ihrem Codebeispiel:

• .flexbox ist so eingestellt, dass es als Flexbox-Container mit einer Spaltenrichtung angezeigt wird.
• .flex ist das gebogene Element.
• .flex-child ist das untergeordnete Element darin .flex.

Wenn .flex-child auf Höhe: 100 % eingestellt wird, kann es den vertikalen Raum seines übergeordneten Elements .flex nicht ausfüllen.

Lösung:

Um dieses Problem zu beheben, nehmen Sie die folgenden Änderungen vor:

• Änderung .flex zur Anzeige als Flexbox: .flex { display: flex; }.
• Entfernen Sie den Stil height: 100% aus .flex-child.

Diese Änderung ermöglicht es dem .flex-child-Element, den verfügbaren vertikalen Raum innerhalb von .flex auszufüllen.

Erklärung:

Die Flexbox-Spezifikation besagt dies align-self: stretch (die Standardeinstellung für gebeugte Elemente) beeinflusst nur den verwendeten Wert der Cross-Size-Eigenschaft eines Elements (in diesem Fall die Höhe). Prozentsätze werden jedoch basierend auf dem angegebenen Wert der Cross-Size-Eigenschaft des übergeordneten Elements berechnet, nicht auf dem verwendeten Wert.

Da für .flex keine Höhe angegeben ist, ist die Standardhöhe „auto“. Wenn Sie .flex-child auf height: 100 % festlegen, berechnet Chrome die Höhe basierend auf dem angegebenen Wert von .flex, der „auto“ ist. Daher hat .flex-child am Ende eine Höhe von 0, weil „auto“ „so groß wie nötig“ bedeutet.

Indem Sie .flex so ändern, dass es als Flexbox angezeigt wird, legen Sie seine Flexrichtung explizit auf Zeile fest . Dadurch kann .flex-child die Höhe von .flex wie erwartet ordnungsgemäß ausfüllen.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „Höhe: 100 %' bei untergeordneten Flexbox-Spalten in Chrome nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!