Vertical flexbox

Header sized to content, with fixed footer, and content region that fills the remaining space.

by lasha

HTML

<section>
<!--   <header>
    header: sized to content
      <br/>(but is it really?)
  </header> -->
  <div>
    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>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>
    <!-- -->
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>

CSS

body {margin: 0;}
section {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header {
  background: tomato;
}
div {
  flex: 2 ;
  background: gold;
  overflow: auto;

}
footer {
  background: lightgreen;
  /* min-height: 60px; */ 
}