Header sizes to content This flex item is inflexible and since it has no explicit height assigned it just sizes to content

Flexible <div> grows to fill This flex item will both grow and shrink, it sizes to space available between the header and footer

DEMO: header and footer with <div> filling space between

In this example header and footer are assigned flex:none. This means they don't grow or shrink, and since they have no height specified they size to content (tho they could have any valid height spec, e.g. 40px, 10%, etc.).

This orange-background <div> has flex:1 1 auto. This has 2 effects:

  1. this flex item grows to fill the space between header and footer
  2. its growth "pushes down" the footer container, effectively making it "stick" to the flex container bottom

Use the checkbox below to disable this container's growth. It collapses down to its normal box-size, which in this case is its min-height:value of 100px. And this makes your footer no longer locked to the bottom of the parent container (for browsers supporting the 2009 flexbox spec this item will become inflexible at its current height, resize the browser and you'll see it...)

For another way to create a sticky footer with Flexbox see this video of Zoe Mickley Gillenwater's Flexbox presentation at 2014 Smashing conference