Flexbox inside another flexbox?

Question

I am trying to get flexbox working inside flexbox. While the first (wrapping) flexbox is working, the one inside does nothing. Is there any way to make this work?

What I want to do effectively has two sticky footers and has a height to reach the footers.

html, body { height: 100%; margin: 0; padding: 0; /* to avoid scrollbars */ } #wrapper { display: flex; /* use the flex model */ min-height: 100%; flex-direction: column; /* learn more: http://philipwalton.imtqy.com/solved-by-flexbox/demos/sticky-footer/ */ } #header { background: yellow; height: 100px; /* can be variable as well */ } #body { flex: 1; border: 1px solid orange; height: 100%: } #wrapper2 { display: flex; /* use the flex model */ min-height: 100%; flex-direction: column; } #body2 { border: 1px solid purple; flex: 1; } #footer2 { background: red; flex: 0; } #footer{ background: lime; } 

 <div id="wrapper"> <div id="body">Bodyof<br/> variable<br/> height<br/> <div id="wrapper2"> <div id="body2"> blah </div> <div id="footer2"> blah<br /> blah </div> </div> </div> <div id="footer"> Footer<br/> of<br/> variable<br/> height<br/> </div> </div> 

Js fiddle

Answer 1

You were almost there. Just a stone's throw from the hotel:

• Make the #body container flex.
• Give .wrapper2 full height with flex: 1 .

(I also got rid of percentage heights, you don't need them.)

 body { margin: 0; } #wrapper { display: flex; flex-direction: column; min-height: 100vh; } #header { background: yellow; height: 100px; } #body { flex: 1; border: 1px solid orange; display: flex; /* new */ flex-direction: column; /* new */ } #wrapper2 { display: flex; flex-direction: column; flex: 1; /* new */ } #body2 { border: 1px solid purple; flex: 1; } #footer2 { background: red; } #footer { background: lime; } 

 <div id="wrapper"> <div id="body"> Bodyof <br>variable <br>height <br> <div id="wrapper2"> <div id="body2">blah</div> <div id="footer2"> blah <br>blah </div> </div> </div> <div id="footer"> Footer <br>of <br>variable <br>height <br> </div> </div> 

jsFiddle

After the adjustments are made, you can align the inner (red) footer to the lower level:

• flex: 1 on #body2 , this is what you have, or
• margin-bottom: auto on #body2 or
• margin-top: auto on #footer2 or
• justify-content: space-between on container ( #wrapper2 )