JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <header>header 1<br>header 2<br>header 3</header>
    <article>content 1<br>content 2<br>content 3</article>
    <footer>footer 1<br>footer 2<br>footer 3</footer>
</div>

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

CSS

div {
    display: flex;
    flex-flow: column;
    width: 300px;
    max-height: 300px;
    padding: 20px;   /* just to see the container */
}
article {
    flex: 2;
    overflow: auto;
    background: gold;
}

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