Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Patricia Arquette
Freigeben: 2024-11-10 04:27:02
Original
710 Leute haben es durchsucht

Why is 'height: 100%' not working on a flexbox column child in Chrome?

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%;
}
Nach dem Login kopieren

Und das Das untergeordnete Element ist so eingestellt, dass es die verfügbare Höhe ausfüllt:

.flex-child {
  height: 100%;
}
Nach dem Login kopieren

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:

  1. Legen Sie das übergeordnete Element .flex auf Anzeige fest : Flex. Dies ist ein entscheidender Schritt, der den Browser explizit anweist, das Flexbox-Layout zu verwenden.
  2. Entfernen Sie die Eigenschaft height: 100% aus dem untergeordneten Element .flex-child. Dies beseitigt die Verwirrung, die dadurch entsteht, dass der Browser versucht, den Prozentwert auf eine nicht spezifizierte übergeordnete Höhe anzuwenden.

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage