JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-container">
    <div id="fixed-height">
      Fixed height
    </div>
    <div id="remaining-height">
      Remaining height 1<br>
      Remaining height <br>
      Remaining height <br>
      Remaining height <br>
      Remaining height <br>
      Remaining height <br>
      Remaining height <br>
      Remaining height <br>
      Remaining height <br>
      Remaining height <br>
      Remaining height <br>
      Remaining height <br>
      Remaining height <br>
      Remaining height <br>
      Remaining height <br>      Remaining height <br>
      Remaining height <br>      Remaining height <br>
      Remaining height <br>      Remaining height <br>      Remaining height <br>      Remaining height <br>      Remaining height <br>
    </div>
</div>

CSS

html,
      body {
        height: 100%;
        width: 100%;
        margin: 0;
      }
#main-container{
height: 100%;
        width: 100%;
}
      #fixed-height {
        background-color: #ebcaca;
        height:80px;
      }
      #remaining-height {
        background-color: #ebe6e6;
        height: calc(100% - 100px);
       overflow-y: auto;
      }