Wie kann man dafür sorgen, dass Flexbox-Kinder die volle Höhe ihres übergeordneten Containers einnehmen?

So bringen Sie untergeordnete Flexbox-Elemente auf die gleiche Höhe wie ihre übergeordneten Elemente.

Bei der Arbeit mit Flexbox kann es zu Problemen kommen, wenn untergeordnete Elemente den gesamten vertikalen Raum ihres übergeordneten Containers ausfüllen . Dies kann besonders frustrierend sein, wenn Sie möchten, dass die untergeordneten Elemente 100 % der Höhe der übergeordneten Elemente haben.

Flexbox Parent Container Setup

Hier ist eine vereinfachte Version Ihres HTML und CSS Code:

HTML:

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

CSS:

.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;
}

Lösung: align-items: stretch

Um dieses Problem zu lösen, ohne auf absolute Positionierung zurückzugreifen oder die Höhe des Flex-2-Elements auf 100 % einzustellen, müssen Sie kann die align-items: stretch-Eigenschaft für den übergeordneten Container flex-2 verwenden.

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

Hinweis zur Height-Eigenschaft

Es ist wichtig, die Höhe zu entfernen : 100 % Eigenschaft aus dem Flex-2-Child-Element. Dadurch wird sichergestellt, dass das untergeordnete Element innerhalb des übergeordneten Containers vertikal gestreckt wird.

Alternative: align-self

Eine weitere Option ist die Verwendung von align-self: stretch on das spezifische untergeordnete Element, dessen Höhe Sie ausfüllen möchten.

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

Diese Methode gibt Ihnen mehr Kontrolle über das einzelne untergeordnete Element Elemente.

Das obige ist der detaillierte Inhalt vonWie kann man dafür sorgen, dass Flexbox-Kinder die volle Höhe ihres übergeordneten Containers einnehmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!