JSFiddle - React, Tailwind, and code Playground

HTML

<div id="master-page">
        <div id="some-unknown-size-content">unknown size content</div>
        <div id="separator">seperator</div>
        <div id="sub-master-page">
            <div id="more-unknown-size-content">unknown size content</div>
            <div id="another-separator">
            <div id="scrollable-content-taking-remaining-space">
                Lorem Ipsum is simply dummy text of the printing and
            </div>
        </div>
</div>

CSS

#master-page{height:400px;background:#eee;}
#some-unknown-size-content{height:50px;background:#f00}
#separator{height:20px;background:#ddd;}
#more-unknown-size-content{height:30px;}
#scrollable-content-taking-remaining-space{background:green;overflow-y:auto}

JavaScript

var remaining_space = $('#master-page').height() - $('#some-unknown-size-content').height()-$('#more-unknown-size-content').height()-$('#separator').height();
	$('#scrollable-content-taking-remaining-space').css('height',remaining_space+'px');