JSFiddle - React, Tailwind, and code Playground

HTML

<div class="widget">
<table cellpadding="0" cellspacing="0">
    <tr class="widget-header">
        <td>20 px above</td>
    </tr>
    <tr class="widget-content">
        
        <td><div class="overflow">This gray ca sdf asd fasdf asd fasdf ass dfasfaf asdf fasdf asd asdf asdfasdf asdfasd fasdell fits allsdff df sdf fsd fsd fsd fsd fsd fsd fsd fsdf available height of table</div></td>
        
    </tr>
    <tr class="widget-footer">
        <td>20 px below</td>
    </tr>
</table>
</div>

CSS

.widget{
    position:absolute;
    min-width:200px;
    width:200px;
    outline:1px solid gray;
    right:50%;
    top:20px;
}
.widget > table{
    height:100%;
    width:100%;
}
.widget-header{
    height:20px;
}
.widget-content{
    vertical-align:top;
    background:gray;
    overflow-y:auto;
}
.widget-footer{
    height:20px;
}

.overflow {
    height:100%;
    overflow-y:scroll;
    background:red;
}

table {
    table-layout:fixed}

/*resizable, not important*/
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }

JavaScript

$(function(){
    $('div.widget')
        .resizable({handles:'s'})
        })