Vertical flexbox

Header sized to content, with fixed footer, and content region that fills the remaining space. https://jsfiddle.net/7yLFL/5/ https://stackoverflow.com/a/25098486/3036312

by Anov Siradj

HTML

<section>
  <header>
    header: sized to content
      <br/>(but is it really?)
  </header>
  <article>
    main content: fills remaining space<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- uncomment to see it break -->
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
  </article>
  <footer>
    footer: fixed height in px
  </footer>
</section>

CSS

section {
  display: flex;
  flex-flow: column;
  height: 300px;
}

header {
  background: red;
}

article {
  flex: 1;
  background: yellow;
  overflow: auto;
}

footer {
  background: green;
  min-height: 60px;
}