JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Is the content area scrollable?</h1>
<div id="a">
        <header>header</header>
        <section>
            <div>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
            </div>
        </section>
    </div>

CSS

#a {
            height: 300px;
            width: 150px;
            border: 1px solid black;
            
            display: flex;
            flex-direction: column;
        }
        
        header {
            flex: 0 0 25px;
            border-bottom: 1px solid red;
        }
        
        section {
            flex-grow: 1;
            position:relative;
            display: flex;
        }
        
        section > div {
            overflow: auto;
            width: 100%;
        }