JSFiddle - React, Tailwind, and code Playground
HTML
<div class="fullpage" id="main">
<header>header</header>
<section>
<div>
<ul>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
</ul>
</div>
<div>
<ul>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
<li>result</li>
</ul>
</div>
</section>
</div>
CSS
.fullpage {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#main {
background: #f0f0f0;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
grid-template-areas: "head" "body";
}
header {
height: 50px;
background: green;
}
section {
display: grid;
grid-template-columns: 500px 500px 1fr;
}
section > div {
overflow-y: auto;
}