Header child of outermost flexbox. Sizes to content. Red-bordered sibling fills remaining vertical space.
Hide/show orange child <div>

child of header, not a flexbox direct child

LeftPane flexbox child (width 40%) and flexbox

The green-bordered div is a flexbox as well as a flexbox child, making it a 3rd level of nesting. As a flex item it's layed out horizontally with its blue-bordered sibling (leftPane width:40%, rightpane uses remaining width). As a flex container it lays out its own children (pink main body div and violet footer) vertically.

This pink-background container has flex:1 which means it grows to fill available space. This "pushes down" the footer div, keeping it anchored to the bottom of parent.

Text below to trigger scrolling:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

LeftPane Footer child of leftPane flexbox

RightPane flexbox child (fills remaining horizontal space) and flexbox

Summary of Flexbox Nesting

This demo uses 3 levels of flexbox nesting:

  1. outermost flexbox contains the yellow-bordered header and the red-bordered div. This flexbox uses column (vertical) layout and its main purpose is to make the red-bordered div fill all space below the header
  2. the red-border div isn't just a flexbox child, it's also a flexbox (i.e., nested flexbox). This 2nd-level flexbox uses row layout for side-by-side positioning of its children (the green-border div and blue-bordered div). Result: a 2-column layout which fills available space
  3. Both the the green-border div and blue-bordered divs are flexboxes as well as flexbox children.Both of these 3rd-level nested flexboxes use column layout and fill available space. Also:
    • flexbox in leftPane has the pink-background child grow to fill unused space which makes the fixed-height violet div a "sticky" footer
    • flexbox in rightPane just has its white-background div grow and shrink to fit space below its heading text