JSFiddle - React, Tailwind, and code Playground

HTML

<div class="l-fit-height">
  <section class="l-fit-height-row">
    <div class="l-fit-height-row-content">
      Header
    </div>
  </section>
  <section class="l-fit-height-row-expanded">
    <div class="l-fit-height-row-content">
      <p>Foo</p>
      <p>Foo</p>
      <p>Foo</p>
      <p>Foo</p>
      <p>Foo</p>
      <p>Foo</p>
      <p>Foo</p>
      <p>Foo</p>
      <p>Foo</p>
      <p>Foo</p>
      <p>Foo</p>
    </div>
  </section>
  <section class="l-fit-height-row">
    <div class="l-fit-height-row-content">
      Footer
    </div>
  </section>
</div>

CSS

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

.l-fit-height {
  display: table;
  height:  100%;
}

.l-fit-height-row {
  display: table-row;
  height:  1px;
}

.l-fit-height-row-content {
  display: block;
}

.l-fit-height-row-expanded {
  height:           auto;
  display:          table-row;
  background-color: lightgrey;
}

.l-fit-height-row-expanded > .l-fit-height-row-content {
  height:     100%;
  overflow-y: auto;
}