Warum macht „Höhe: 100 %“ bei einem Flex Child die Flexbox kaputt?

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:

• Das übergeordnete Element des zu streckenden Elements erfordert eine deklarierte Höhe, was dem Standardverhalten von Flexbox widerspricht.
• Wenn sich andere Kinder über oder unter dem gestreckten Element befinden, ignoriert „Höhe: 100 %“ deren Anwesenheit und führt zu Konflikten.

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!