Wie kann ich Flexbox-Elemente zu 100 % der Höhe ihres Elternelements machen?

Question

Ich versuche, den vertikalen Platz eines Flex-Elements innerhalb eines Flexbox auszufüllen.

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

Und hier ist der JSFiddle

flex-2-child füllt die erforderliche Höhe nicht aus, außer in den beiden Fällen, in denen:

1. flex-2 eine Höhe von 100% hat (was seltsam ist, weil ein Flex-Element standardmäßig 100% hat + es in Chrome fehlerhaft ist)
2. flex-2-child position:absolute hat, was auch unpraktisch ist

Dies funktioniert derzeit nicht in Chrome oder Firefox.

Answer 1

Verwenden Sie align-items: stretch

Ähnlich wie die Antwort von David Storey ist mein Workaround:

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

Beachten Sie, dass height: 100% aus dem Kindkomponenten entfernt werden muss (siehe Kommentare).

Alternativ zu align-items können Sie align-self nur auf dem Element .flex-2-child verwenden, das gedehnt werden soll.

Answer 2

Ich weiß, du hast bereits gesagt, dass position: absolute; umständlich ist, aber es funktioniert. Siehe unten für weitere Informationen zur Behebung des Resize-Problems.

Sieh dir auch dieses jsFiddle für eine Demo an, obwohl ich nur WebKit-Präfixe hinzugefügt habe, also öffne es in Chrome.

Im Grunde hast du zwei Probleme, die ich separat behandeln werde.

1. Das Kind eines Flex-Elements ausfüllen

• Setze position: relative; auf das Eltern-Element des Kindes.
• Setze position: absolute; auf das Kind.
• Du kannst dann Breite/Höhe nach Bedarf festlegen (wie 100% in meinem Beispiel).

2. Behebung des Resize-Scrolling-"Problems" in Chrome

• Füge overflow-y: auto; auf das scrollbare Element hinzu.
• Das scrollbare Element muss eine explizite Höhe angegeben haben. Mein Beispiel hat bereits eine Höhe von 100%, aber wenn keine angegeben ist, kannst du height: 0; festlegen.

Siehe diese Antwort für weitere Informationen zum Scroll-Problem.

Answer 3

Wenn ich es richtig verstehe, möchten Sie, dass flex-2-child die Höhe und Breite seines Elternelements ausfüllt, sodass der rote Bereich vollständig vom grünen Bereich bedeckt ist?

Wenn ja, müssen Sie nur flex-2 so einstellen, dass Flexbox verwendet wird:

.flex-2 {
    display: flex;
}

Sagen Sie dann flex-2-child, flexibel zu werden:

.flex-2-child {
    flex: 1;
}

Siehe http://jsfiddle.net/2ZDuE/10/

Der Grund dafür ist, dass flex-2-child kein Flexbox-Element ist, aber sein Elternteil schon.

Answer 4

Ich habe die Lösung selbst gefunden. Nehmen wir an, Sie haben das folgende CSS:

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- hat nicht funktioniert
}

In diesem Fall funktioniert das Setzen der Höhe auf 100% nicht, daher habe ich die Regel margin-bottom auf auto gesetzt, wie folgt:

.child {
  margin-bottom: auto;
}

Und das Kind wird oben an den obersten Teil des Elternelements ausgerichtet sein.

Sie können auch die Regel align-self verwenden, wenn Sie möchten:

.child {
  align-self: flex-start;
}

Answer 5

Ich nehme an, dass das Verhalten von Chrome konsistenter mit der CSS-Spezifikation ist (obwohl es weniger intuitiv ist). Gemäß der Flexbox-Spezifikation ändert der standardmäßige stretch-Wert der Eigenschaft align-self nur den verwendeten Wert der "queren Größe-Eigenschaft" des Elements (height in diesem Fall). Und soweit ich die CSS 2.1-Spezifikation verstehe, werden prozentuale Höhen vom festgelegten Wert der Eltern-height berechnet, nicht vom verwendeten Wert. Der festgelegte Wert der Eltern-height wird von keinen Flex-Eigenschaften beeinflusst und ist immer noch auto.

Das Festlegen einer expliziten height: 100% macht es formal möglich, die prozentuale Höhe des Kindes zu berechnen, genau wie das Festlegen von height: 100% für html es möglich macht, die prozentuale Höhe von body in CSS 2.1 zu berechnen.