CSS: full height column, allowing fixed-height header and footer and scrollable content

full-height-column.css

/*
  <article class="full-height-column">
    <header></header>
    <section></section>
    <footer></footer>
  </article>
*/

.full-height-column {
  display: flex;
  flex-direction: column;
  /* 
    IE11 does not like auto, but works fine with 100%
  */
  flex: 1 1 100%;
  /* 
    Firefox get's freaky with nested overflow containers
    see https://lists.w3.org/Archives/Public/www-style/2014Jul/0589.html
  */
  min-width: 0;
}

.full-height-column > header,
.full-height-column > section,
.full-height-colum > footer {
  box-sizing: border-box;
}

.full-height-column > section {
  /*
    make the element stretch to fill the available space
    see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
  */
  flex: 1 1 100px;
  /*
    make the element scrollable
    see http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
  */
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /*
    make sure the scrollbar is drawn on top of the content
    see http://stackoverflow.com/questions/15152470/chrome-rendering-issue-fixed-position-anchor-with-ul-in-body/15203880#15203880
  */
  transform: translateZ(0);
}