...
   
...
   


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;
}