JSFiddle - React, Tailwind, and code Playground

by dystroy

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>ohohoh</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

function resetScrollableHeights(){
    $sp = $('.scrollable').closest('td'), heights = [], contents = [];
    $sp.each(function(){
        $(this).css('height', 'auto'); // without this, window size shrinking would be badly handled
        contents.push($('.scrollable', this).detach());
    });
    $sp.each(function(){
        heights.push($(this).height());
    });
    $sp.each(function(){
        $(this).append(contents.shift()).css('height', heights.shift());
    });
}
$(window).resize(resetScrollableHeights);
document.getElementById('but').onclick=function(){
 document.getElementById('val').innerHTML=new Array(100).join('A<br>');
 resetScrollableHeights();
}