JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height:300px; padding-bottom:55px; border:2px solid red;">

<div class="all" style="height:10%;">
10% height
</div> 
    
    
<div class="all" style="height:20%; overflow-y: scroll;">
20% height<br>10% height<br>10% height<br>10% height<br>20% height<br>10% height<br>10% height<br>10% height<br>
</div>      
    
    
<div class="all" style="height:70%;">
70% height
</div>       
    
    
</div>

CSS

.all {
border:1px solid red; background:#aaaaaa; padding: 5px; margin:5px; 
}