working flexbox example

by Jacob Michaelis

HTML

<div class="mybox">
  <div class="myrow myheader">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="myrow mycontent">
    <p>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
    </p>
  </div>
  <div class="myrow myfooter">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

CSS

html,
body {
  height: 100%;
  margin: 0
}

.mybox {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.mybox .myrow {
  border: 1px dotted grey;
}

.mybox .myrow.myheader {
  flex: 0 1 auto;
}

.mybox .myrow.mycontent {
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  overflow-y: auto;
}

.mybox .myrow.myfooter {
  flex: 0 1 40px;
}