JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height: 100%">
    <div style="height: 100px;">
      <h1>Page header</h1>
    </div>
      <div id="container">
        <div id="top"></div>
        <div id="list">
          <div class="row">Lorem ipsum dolor sit amet.</div>
          <div class="row">Lorem ipsum dolor sit amet.</div>
          <div class="row">Lorem ipsum dolor sit amet.</div>
          <div class="row">Lorem ipsum dolor sit amet.</div>
          <div class="row">Lorem ipsum dolor sit amet.</div>
          <div class="row">Lorem ipsum dolor sit amet.</div>
          <div class="row">Lorem ipsum dolor sit amet.</div>
          <div class="row">Lorem ipsum dolor sit amet.</div>
          <div class="row">Lorem ipsum dolor sit amet.</div>
          <div class="row">Lorem ipsum dolor sit amet.</div>
          <div class="row">Lorem ipsum dolor sit amet.</div>
          <div class="row">Lorem ipsum dolor sit amet.</div>
          <div class="row">Lorem ipsum dolor sit amet.</div>
          <div class="row">Lorem ipsum dolor sit amet.</div>
          <div class="row">Lorem ipsum dolor sit amet.</div>
          <div class="row">Lorem ipsum dolor sit amet.</div>
          <div class="row">Lorem ipsum dolor sit amet.</div>
        </div>
        <div id="bottom"></div>
      </div>
  </div>

CSS

* { box-sizing: border-box; padding: 0; margin: 0; }
    html, body { height: 100%; }

    #container {
      height: 100%;
      display: flex;
      flex: 0 0 auto;
      flex-flow: column;
    }

    #list {
      display: flex;
      flex-flow: column;
      overflow: auto;
    }

    #top {
      flex: 0 0 20px;
      background-color: #db9277;
    }

    #bottom {
      flex: 0 0 20px;
      background-color: #db9277;
    }

    .row {
      flex: 1 0 auto;
      height: 100px;
      background-color: #85d8d5;
    }