JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">
    <div id="head">
        <p>Dynamic size without scrollbar</p>
        <p>Dynamic size without scrollbar</p>
        <p>Dynamic size without scrollbar</p>
<p>Dynamic size without scrollbar</p>         
    </div>
    <div id="content">
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
    </div>
    <div id="foot">
        <p>Fixed size without scrollbar</p>
        <p>Fixed size without scrollbar</p>
    </div>  
</div>

CSS

#page {
    position: relative;
    top; 150px;
    left: 150px;
    height: 300px;
    width: 500px;
    border: black dashed 2px;
}
    
#head {
    border: green solid 1px;
}

#content{
    border: red solid 1px;
    overflow:scroll;
}

#foot {
    border: blue solid 1px;

    
}

JavaScript

var height = document.getElementById('page').clientHeight;
    var footerheight = document.getElementById('foot').clientHeight;
    var headheight = document.getElementById('head').clientHeight;
    var content = document.getElementById('content');
    
    var step1 = (height - headheight);
    var availableheight = (step1 - footerheight);
    content.style.height = availableheight + 'px';
    content.style.overflow = scroll;