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>
everything ok with a fixed container size

CSS

div {
    display: flex;
    flex-flow: column;
    width: 300px;
    height: 300px;   /* this works, but only for a fixed size */
    /* max-height: 300px;  this makes the article content disappear */
    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; }