JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="grid-header">
    <h3>
      hi
    </h3>
  </div>
  <div class="grid-content">
    <div>
      <div>
        asdf
      </div>
    </div>
  </div>
  <div class="grid-footer">
    <h3>
      bye
    </h3>
  </div>
</div>

CSS

html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
  margin: 0px;
}

*, *:before, *:after {
  box-sizing: border-box;
}

div.grid {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: 1fr;
  height: 100%;
  width: 100%;
}

div.grid-header, div.grid-footer {
  background-color: #ff0000;
}

div.grid-content {
  background-color: #00ff00;
  height: 100%;
}

div.grid-content > div {
  height: 100%;
  overflow-y: auto;
}

div.grid-content > div > div {
  height: 200vh;
  width: 50vw;
  background-color: #0000ff;
}