JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="header">Not empty</div>
      <input type="button" value="resize" onclick="resize();" />
    <div id="content">
        <div id="inner_header">Not empty</div>
        <div id="scrollable_content">Very long content</div>
    </div>
  
</div>

<script>
function resize()
{
    var height = $('#container').height();
    $('#scrollable_content').height((height - 67) + "px")
    
    
}
    
</script>

CSS

html, body {
    height:100%;
}
div#header { border: 1px solid black; }
div#container {
    height:100%;
    border: 1px solid red;
}
div#scrollable_content {
    height:100%;
    overflow-y:auto;
    position:absolute;
    border: 1px solid green;
}