JSFiddle - React, Tailwind, and code Playground

HTML

<div class='commonDiv'>variable height<br>variable height</div>
<div class='commonDiv'>variable height<br>variable height</div>
<div class='commonDiv'>variable height<br>variable height</div>
<div class='div1'>fixed height</div>
<div class='div2'>fixed height, scrollable<br>fixed height, scrollable<br>fixed height, scrollable<br>fixed height, scrollable<br></div>
    
    <div class='div3'>fixed height at bottom</div>

CSS

.commonDiv{ float:left; width:100%; border:1px #000000 solid; }
.div1{float:left; height:50px; border:1px #000000 solid; width:100%;}
.div2{float:left; height:50px; overflow:scroll; border:1px #000000 solid; width:100%;}
.div3{position:fixed; bottom:0; height:50px; border:1px #000000 solid; width:100%;}