Flex-Box-Stretching-Problem

Question

Ich habe ein Problem mit der Flex-Box. Ich möchte eine Spalte mit zwei Zeilen, wo es zwei Spalten in der zweiten Zeile gibt. Allerdings möchte ich nur ein Wrapper-Element dafür verwenden (ich möchte die zweite Zeile nicht in ein div einbinden). Das Problem ist, dass ich nur die Elemente der zweiten Zeile strecken möchte.

Hier ist https://jsfiddle.net/x8g0wupg/

HTML

<div id="wrap"> 
    <header>text</header> 
    <div id="a">text</div> 
    <div id="b">text</div> 
</div> 

CSS

#wrap { 
    display: flex; 
    flex-flow: row wrap; 
    height: 500px; 
    border: 3px solid yellow; 
} 

header { 
    background-color: white; 
    width: 50px; 
    flex: 1 100%; 
    height: 40px; 
} 

#a { 
    background-color: green; 
    flex-grow: 1; 
} 

#b { 
    background-color: red; 
    flex-grow: 1; 
} 

ich ihnen den Weg zu machen, gelang es mir, sie wollen jedoch das erste Säulenelement positioniert werden gerade tut wollen Shring auf die Höhe, die ich ihm gesetzt habe, anstatt ihm, lässt es einen leeren Raum zu den vertikalen 50% des Wrappers.

Gibt es eine Möglichkeit, es ohne zusätzliche Wrapper für die zweite Zeile zu tun?

Vielen Dank!

Answer 1

Ein bisschen hackish, mit align-self: flex-end; und einem negativen oberen Rand auf dem Elternteil.

Siehe https://jsfiddle.net/C14L/1rj3kdkb/