JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
<h2>
title1
</h2>
<div id="div1">
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
</div>
<h2>
title2
</h2>
<div id="div2">
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
</div>
<h2>
title3
</h2>
<div id="div3">
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
</div>
</div>

CSS

body,html{
  max-height:100vh;
}
#content{
  max-height:100%;
}


#div1,#div2,#div3{
  background:#fff;
  overflow-y:scroll;
  max-height: 30%;
}