JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top">
    asdf
</div>
<div id="bottom">
    ghjk
</div>
<div id="main">
    <p>zxcv</p>
    <p>zxcv</p>
    <p>zxcv</p>
    <p>zxcv</p>
    <p>zxcv</p>
    <p>zxcv</p>
    <p>zxcv</p>
    <p>zxcv</p>
    <p>zxcv</p>
    <p>zxcv</p>
    <p>zxcv</p>
    <p>zxcv</p>
    <p>zxcv</p>
    <p>zxcv</p>
    <p>zxcv</p>
    <p>zxcv</p>
    <p>zxcv</p>
    <p>zxcv</p>
    <p>zxcv</p>
    <p>zxcv</p>
    
</div>

CSS

#top, #bottom, #main
{
    position: absolute;
    left: 0px;
    right: 0px;
}

#top
{
    background-color: blue;
    color: white;
    top: 0px;
    height: 40px;
}

#bottom
{
    background-color: black;
    color: white;
    bottom: 0px;
    height: 50px;
}

#main
{
    background-color: silver;
    top: 40px;
    bottom: 50px;
    overflow: auto;
}