JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <p>Let's call this one the header</p>
  <div class="lots-of-content-div">
  <ul>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
    <li>Hello!</li>
  </ul>
  </div>
</div>

CSS

.grid{
  height:100%;
  display:grid;
  grid-template-rows:auto 1fr;
  background-color:yellow;
}

.lots-of-content-div {
  height:100%;
  background-color:orange;
  overflow-y:auto;
}