<pre><code>&lt;body&gt;
   &lt;header&gt;...&lt;/header&gt;
   &lt;section class=&quot;main-content&quot;&gt;...&lt;/section&gt;
   &lt;footer&gt;...&lt;/footer&gt;
&lt;/body&gt;

header{
  /* We want the header to have a static height, 
  it will always take up just as much space as it needs.  */
  /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 0 0 auto;
}

.main-content{
  /* By setting flex-grow to 1, the main content will take up 
  all of the remaining space on the page. 
  The other elements have flex-grow: 0 and won't contest the free space. */
  /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 1 0 auto;
}

footer{
  /* Like the header, the footer will have a static height - it shouldn't grow or shrink.  */
  /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 0 0 auto;
}


</code></pre>