JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <header>header 1</header>
    <article>
        <ul>
            <li> Content 1 </li>
            <li> Content 2 </li>
            <li> Content 3 </li>
            <li> Content 4 </li>
            <li> Content 5 </li>
            <li> Content 6 </li>
            <li> Content 7 </li>
            <li> Content 8 </li>
            <li> Content 9 </li>
            <li> Content 10 </li>
            <li> Content 11 </li>
            <li> Content 12 </li>
            <li> Content 13 </li>
            <li> Content 14 </li>
            <li> Content 15 </li>
            <li> Content 16 </li>
        </ul>
    </article>
    <footer>footer 1</footer>
</div>

giving the container a max-height instead of a height hides the content

CSS

div {
    display: flex;
    flex-direction: column;
    width: 300px;
    max-height: 300px;
}
article {
    flex-grow: 1;
    overflow: auto;
    background: gold;
}

/* (colors, not important) */
div { background: #eee; }
header { background: tomato; }
article { background: gold; }
footer { background: lightgreen; }