JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outergrid">
  <div class="row1">
  Outer Grid Header
  </div>
  <div class="row2">
    <div class="header">
    Inner Grid Header
    </div>
    <div class="contentbox">
      <div class="tallcontent">
        Tall Content
      </div>
    </div>
  </div>
</div>

SCSS

*{
  padding: 0px;
  margin: 0px;
}

.outergrid {
  display: grid;
  grid-template-rows: 50px 100%;
  grid-gap: 10px;
  background-color: #0ff;
  div {
    background-color: #afa;
  }
}
.row1{
  grid-row: 1;
}
.row2{
  grid-row: 2;
  display: grid;
  grid-template-rows: 50px 100%;
  grid-gap: 5px;
  .header {
    grid-row: 1;
    background-color: #ffa;
  }
  .contentbox {
     grid-row: 2;
     overflow: scroll;
     .tallcontent {
       background-color: #89f;
       height: 1000px;
     }
  }
}