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:
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