JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="top">
    <div class="content">
      <div class="content_child">
      </div>
    </div>
  </div>
  
  <div class="bottom"></div>

</div>

CSS

body, html{
  height: 100%;
  padding: 0px;
  margin: 0px;
}

.container{
  background; black;
  width: 100%;
  height: 100%;
}
.top{
  background: blue;
  height: calc(100% - 70px);
  padding: 5px;
}

.bottom{
  background: red;
  height: 60px;
}

.content{
  height: 100%;
  overflow-y: scroll;
}

.content_child{
  height: 2000px;
  background: grey;
}