Flexbox row inside flexbox column

I have a layout like this:

<div> <div></div> <div></div> <div></div> </div> 

and css for it:

html, body { height: 100%; } .flexbox { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-content: stretch; align-items: flex-start; height: 100%; width: 100%; } .flexbox .main { order: 0; flex: 1 1 auto; align-self: stretch; } .flexbox .header, .flexbox .footer { order: 0; flex: 0 1 auto; align-self: stretch; } 

in the above .main column is stretched 100% height, all this works perfect, now adding .flexbox-row inside .main:

<div> <div></div> <div> <div> <div></div> <div></div> <div></div> </div> </div> <div></div> </div> 

and css:

.flexbox-row { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-content: stretch; align-items: flex-start; } .flexbox-row .first, .flexbox-row .second, .flexbox-row .third { order: 0; flex: 0 1 auto; align-self: stretch; } .flexbox-row .second { order: 0; flex: 1 1 auto; align-self: stretch; } 

but for some reason .main column the second one does not stretch 100% in height anymore.

Here is jsbin demo

1 Answer

Add height:100% to .flexbox-row

I've simplified your rules, there were unnecessary properties there.

html, body { height: 100%; margin: 0 } .flexbox { display: flex; flex-direction: column; flex-wrap: nowrap; height: 100%; width: 100%; } .flexbox .main { flex: 1; background: red } .flexbox .header, .flexbox .footer { background: green; padding:1em } .flexbox-row { display: flex; height: 100%; } .flexbox-row .first, .flexbox-row .second, .flexbox-row .third { background: #C9E1F4; padding: 1em; } .flexbox-row .second { flex: 1; background: #A8EDAC }

<div> <div>Header</div> <div> <div> <div>First</div> <div>Main</div> <div>Third</div> </div> </div> <div>Footer</div> </div>

UPDATE

In Chrome and Safari, the height of (non flex) children are not recognized in percentages. However Firefox and IE recognize and scale the children based on percentage heights.

Source

So a workaround for that is adding .position:relative to .main and position:absolute, width/height:100% to .flexbox-row

html, body { height: 100%; margin: 0 } .flexbox { display: flex; flex-direction: column; flex-wrap: nowrap; height: 100%; width: 100% } .flexbox .main { flex: 1; background: red; position: relative } .flexbox .header, .flexbox .footer { background: green; padding: 1em } .flexbox-row { display: flex; position:absolute; height: 100%; width: 100% } .flexbox-row .first, .flexbox-row .second, .flexbox-row .third { background: #C9E1F4; padding: 1em; } .flexbox-row .second { flex: 1; background: #A8EDAC }

<div> <div>Header</div> <div> <div> <div>First</div> <div>Main</div> <div>Third</div> </div> </div> <div>Footer</div> </div>