JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
        <div class="top">top</div>
        <div class="middle">
            middle<br><br><br><br>
            <br><br><br><br>middle
        </div>
        <div class="bottom">bottom</div>
    </div>

CSS

html,body{height:100%;margin:0px;padding:0px;}
.wrapper{width:100%;height:100%;}
.top{position:absolute;top:0px;width:100%;height:100px;
    background:#00b;}
.bottom{position:absolute;bottom:0px;width:100%;height:100px;
    background:#00b;}
.middle{position:absolute;top:100px;bottom:100px;width:100%;
    overflow:auto;
    background:#b00;}