JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height: 100%;">
    <!--<div style="display: flex; flex: 0 0 auto; height: 300px;"></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;
    }