JSFiddle - React, Tailwind, and code Playground

HTML

<main>
  <header>Header</header>
  
  <div class="content">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

  <footer>Footer</footer>
</main>

CSS

body {
  margin: 0;
  height: 100vh;
}

main {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
}

header,
footer {
  padding: 1em;
  background: lightblue;
}

.content {
  flex-grow: 1;
  overflow: auto;
}