JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="header">
        This header area should extend all the way across the top of the page. The vertical scrollbar is supposed to start below it.
    </div>
    <div id="content">
        <div id="inner_header"></div>
        <div id="scrollable_content">
            <p>This content area is very tall and triggers two vertical scrollbars.</p>
            <br />
            <p>One scrollbar is for the entire page. The second scrollbar is for the green boxes' container (div with id=content). </p>
        </div>
    </div>
</div>

CSS

html, body {
    height:100%;
}
div#header { border: 1px solid black; text-align: center; padding: 30px; }
div#container {
    height:100%;
    border: 1px solid red;
}
div#content { overflow: scroll; height: 100%; }
div#scrollable_content {
    height: 3000px;
    overflow-y:auto;
    border: 1px solid green;
    padding: 10px;
}