JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="top">
    Fixed height 100px. No floating or layered box 
  </div>
  <div class="scrollBox">
    Fluid height to screen height 100%
    <br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br>
  </div>

</div>

CSS

html, body { height:100%; margin:0; padding:0; }
.wrap { height:100%; background:lightblue }
.top { height:100px; background:green}
.scrollBox {  width:80%;  height: calc(100vh - 100px); margin:0 auto 0 auto; border:1px solid #000; overflow-y:auto; background:#eee; }