JSFiddle - React, Tailwind, and code Playground

HTML

<div id=a>
    <div id=b>
        <table id=c border=1>
            <tr><th height=20 width=20>
                <input type=button id=but value="Fill cell">
            </th><th>A</th></tr>
            <tr><th>dataname</th>
                <td><div id=val class=scrollable>not<br/>much<br/>here</div></td>
            </tr>
        </table>
    </div>
</div>

CSS

#a {
   position:fixed;
   top:20px; left:20px; bottom:50px;width:200px;
   background:red; margin:10px;
}
#b { height:100%; }
#c { width:100%; height:100%; }
.scrollable {
    width:100%; height:100%;
    overflow-y:auto;
}

JavaScript

document.getElementById('but').onclick=function(){
 document.getElementById('val').innerHTML=new Array(100).join('B<br>');
}