Strecken eines flexiblen untergeordneten Elements, um die Containerhöhe ohne explizite übergeordnete Höhe auszufüllen
In Situationen, in denen wir ein flexibles untergeordnetes Element strecken müssen, um die gesamte Containerhöhe auszufüllen Höhe, um sicherzustellen, dass die Größe des Elternteils von den Inhalten eines anderen Kindes abhängt, kann die Einstellung „Höhe: 100 %“ für das Kind zu unerwartetem Verhalten in Flexbox führen.
Warum die Verwendung von „Höhe: 100 %“ kann Flexbox unterbrechen
Bei Verwendung von „Höhe: 100 %“ in Flexbox:
Die Lösung: Entfernen Sie „ Höhe: 100 %“
Um die gewünschte Dehnung zu erreichen, ohne Flexbox zu beschädigen, entfernen Sie einfach „Höhe: 100 %“ aus dem untergeordneten Element.
Erklärung
In Flexbox mit Zeilenrichtung (Standardeinstellung) steuert die Eigenschaft „align-items“ das vertikale Verhalten. Die Standardeinstellung ist „Strecken“, wodurch flexible Elemente automatisch gedehnt werden, um die verfügbare Höhe auszufüllen, sofern für das übergeordnete Element keine explizite Höhe festgelegt ist.
Codebeispiel
Bedenken Sie das folgende Code-Snippet:
<code class="html"><div style='display: flex'> <div style='background-color: yellow; width: 20px'></div> <div style='background-color: blue'> some<br>cool<br>text </div> </div></code>
In diesem Beispiel wird das gelbe untergeordnete Element gedehnt, um die gesamte Höhe seines übergeordneten Elements auszufüllen, während die Höhe des übergeordneten Elements automatisch basierend auf dem Textinhalt des blauen untergeordneten Elements angepasst wird.
Das obige ist der detaillierte Inhalt vonWarum macht „Höhe: 100 %' bei einem Flex Child die Flexbox kaputt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!