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

Dies kann auch mit align-self: stretch; auf dem Element gelöst werden, das wir dehnen möchten.

Manchmal ist es wünschenswert, nur ein Element in einem Flexbox-Setup zu dehnen.

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

Answer 2

Ein anderer Ansatz (eine andere Option würde in meinem Fall nicht passen, weil ich eine generischere Lösung benötigte, ich möchte wirklich vermeiden, position: absolute zu verwenden, wenn möglich, und nur display: flex mit align-items: stretch würde in meinem Fall wegen anderer Styles nicht funktionieren):

1. Einen Eltern-Container mit display: flex haben
2. Geben Sie Ihrem Element ebenfalls display: flex, align-self: stretch und margin-top: 0 + margin-bottom: 0

Minimal reproduzierbares Beispiel:

.parrent {
  display: flex;
}
.full-height-just-with-bg-collor {
  width: 100%;
  display: flex;
  align-self: stretch;
  // dies kann nur 0 oder Sie können nur die oberen und unteren Werte setzen
  margin: 0 2px;
  background-color: green;
}

    textForHeight

Answer 3

Eine Idee wäre, dass display:flex; mit flex-direction: row; den Container-Div mit .flex-1 und .flex-2 füllt, aber das bedeutet nicht, dass .flex-2 standardmäßig eine height:100%; hat, auch wenn sie auf volle Höhe erweitert ist.

Und um ein Kind-Element (.flex-2-child) mit height:100%; zu haben, müssen Sie das Elternelement auf height:100%; setzen oder display:flex; mit flex-direction:row; auch auf den .flex-2-Div anwenden.

Soweit ich weiß, wird display:flex nicht alle Ihre Kind-Elemente auf 100% Höhe erweitern.

Eine kleine Demo, in der die Höhe von .flex-2-child entfernt und display:flex; auf .flex-2 angewendet wurde: http://jsfiddle.net/2ZDuE/3/

Answer 4

.parent {
    Anzeige: Flex;
}

.child {
    min-Höhe: 100%;
}

Answer 5

.container {
    height: 200px;
    width: 500px;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-1 {
   flex:1 0 100px;
    background-color: blue;
}
.flex-2 {
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1 0 100%;
    background-color: red;
}
.flex-2-child {
    flex: 1 0 100%;
    height: 100%;
    background-color: green;
}

http://jsfiddle.net/2ZDuE/750/