Wie kann ein untergeordnetes Flexbox-Element 100 % der Höhe seines übergeordneten Elements ausfüllen?

Flexbox-Kindhöhe: 100 % Elternfüllung erreichen

In der Welt von Flexbox stellt das Ausfüllen des vertikalen Raums von Kinderelementen eine häufige Herausforderung dar . Betrachten wir den von Ihnen bereitgestellten Codeausschnitt:

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

In diesem Szenario belegt das Element „flex-2-child“ nicht den gesamten vertikalen Raum seines übergeordneten Containers, es sei denn, „flex-2“ hat eine Höhe von 100 % oder wenn Flex-2-Kind eine absolute Position hat. Allerdings haben beide Lösungen ihre eigenen Nachteile.

Die Lösung: Align-Items Stretch

Eine effektive Problemumgehung besteht darin, die Eigenschaft align-items im übergeordneten Container zu verwenden ( flex-2):

.flex-2 {
    display: flex;
    align-items: stretch;
}

Beachten Sie, dass die Höhe: 100 %; Die Eigenschaft sollte aus der untergeordneten Komponente (flex-2-child) entfernt werden.

Dieser Ansatz weist das flex-2-child-Element an, sich vertikal zu strecken und den verfügbaren Platz in seinem übergeordneten Container zu füllen. Es funktioniert sowohl in Chrome als auch in Firefox.

Als Alternative zu align-items können Sie align-self speziell auf das Flex-2-Child-Element anwenden, das Sie strecken möchten:

.flex-2-child {
    align-self: stretch;
}

Durch die Verwendung beider Techniken können Sie das gewünschte Verhalten erreichen, bei dem Flexbox-Kinder die volle Höhe ihrer übergeordneten Elemente ausfüllen.

Das obige ist der detaillierte Inhalt vonWie kann ein untergeordnetes Flexbox-Element 100 % der Höhe seines übergeordneten Elements ausfüllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!