Wie kann ich Flexbox-Kinder zu 100% ihrer Eltern machen?

Ich versuche, den vertikalen Raum eines Flex-Elements in einer Flexbox zu fü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;
}

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

Und hier ist die JSFiddle

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

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

Dies funktioniert derzeit nicht in Chrome oder Firefox.

Verwenden align-items: stretch

Ähnlich wie bei David Storeys Antwort lautet meine Problemumgehung:

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

Alternativ align-itemskönnen Sie align-selfnur den .flex-2-childGegenstand verwenden, den Sie dehnen möchten.

Ich habe eine ähnliche Frage beantwortet hier .

Ich weiß, dass Sie bereits gesagt haben, position: absolute;ist unpraktisch, aber es funktioniert. Weitere Informationen zum Beheben des Größenänderungsproblems finden Sie weiter unten.

In dieser jsFiddle finden Sie auch eine Demo, obwohl ich nur Webkit-Präfixe hinzugefügt habe, die in Chrome geöffnet sind.

Sie haben grundsätzlich zwei Probleme, die ich separat behandeln werde.

1. Das Kind eines Flex-Elements dazu bringen, die Höhe zu 100% zu füllen
   • Legen Sie position: relative;auf dem Elternteil des Kindes.
   • Setze position: absolute;auf das Kind.
   • Sie können dann Breite / Höhe nach Bedarf einstellen (100% in meinem Beispiel).
2. Behebung der Größenänderung beim Scrollen in Chrome
   • Setzen Sie overflow-y: auto;das scrollbare Div auf.
   • Für das scrollbare Div muss eine explizite Höhe angegeben werden. Mein Beispiel hat bereits eine Höhe von 100%, aber wenn noch keines angewendet wurde, können Sie angebenheight: 0;

Weitere Informationen zum Bildlauf finden Sie in dieser Antwort .

Wenn ich das richtig verstehe, möchten Sie, dass Flex-2-Child die Höhe und Breite seines Elternteils ausfüllt, damit der rote Bereich vollständig vom Grün bedeckt wird?

Wenn ja, müssen Sie nur flex-2 einstellen, um flexbox zu verwenden:

.flex-2 {
    display: flex;  
}

Dann sagen Sie flex-2-child, dass es flexibel werden soll:

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

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

Der Grund dafür ist, dass flex-2-child kein Flexbox-Element ist, sondern das übergeordnete.

Ich nehme an, dass das Verhalten von Chrome besser mit der CSS-Spezifikation übereinstimmt (obwohl es weniger intuitiv ist). Gemäß der Flexbox-Spezifikation ändert der Standardwert stretchder align-selfEigenschaft nur den verwendeten Wert der "Cross Size-Eigenschaft" des Elements ( heightin diesem Fall). Und nach meinem Verständnis der CSS2.1-Spezifikation werden die prozentualen Höhen aus dem angegebenen Wert des übergeordneten Elements berechnet height, nicht aus dem verwendeten Wert. Der angegebene Wert des übergeordneten Elements heightwird von keinen Flex-Eigenschaften beeinflusst und bleibt bestehen auto.

Die explizite Einstellung height: 100%ermöglicht formal die Berechnung der prozentualen Größe des Kindes, genau wie die Einstellung height: 100%auf htmldie Berechnung der prozentualen Größe von bodyin CSS2.1.

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

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

.child {
  height: 100%; <- didn't work
}

In diesem Fall funktioniert das Festlegen der Höhe auf 100% nicht. Ich setze die margin-bottomRegel also autowie folgt :

.child {
  margin-bottom: auto;
}

align-selfWenn das Kind am obersten Punkt des Elternteils ausgerichtet ist, können Sie die Regel auch verwenden, wenn Sie dies bevorzugen.

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

Eine Idee wäre, dass display:flex;mit flex-direction: row;das containerdiv mit .flex-1und gefüllt wird .flex-2, aber das bedeutet nicht, dass dies .flex-2eine Standardeinstellung hat, height:100%;selbst wenn es auf volle Höhe erweitert ist und um ein untergeordnetes Element ( .flex-2-child) mit zu haben, müssen height:100%;Sie das übergeordnete Element festlegen height:100%;oder verwenden display:flex;mit flex-direction: row;auf dem .flex-2div auch.

Soweit ich weiß, display:flexwird die Höhe aller untergeordneten Elemente nicht auf 100% erweitert.

Eine kleine Demo, die die Höhe entfernt .flex-2-childund verwendet display:flex;auf .flex-2: http://jsfiddle.net/2ZDuE/3/

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: -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/

Dies kann auch mit align-self: stretch;dem Element gelöst werden, das gedehnt werden soll.

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

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

.container {. . . . Elemente ausrichten: dehnen; . . . . }}

Dies ist meine Lösung mit CSS +

Zuallererst, wenn das erste Kind (Flex-1) 100px sein sollte, sollte es nicht Flex sein. In CSS + können Sie flexible und / oder statische Elemente (Spalten oder Zeilen) festlegen, und Ihr Beispiel wird so einfach:

<div class="container">
  <div class="EXTENDER">
    <div class="COLS">
      <div class="CELL _100px" style="background-color:blue">100px</div>
      <div class="CELL _FLEX" style="background-color:red">flex</div>
    </div>
  </div>
</div>

Container CSS:

.container {
    height: 200px;
    width: 500px;
    position:relative;
}

und offensichtlich enthalten CSS + 0,2 Kern

höre die Geige