JSFiddle - React, Tailwind, and code Playground

HTML

<button id="less">less content</button>
<button id="more">more content</button>

<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>

interactive version to test overflow, still 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; }

JavaScript

var lines = 3;
onload = onclick = function (e) {
    if (e.target.id == "more") {
        lines += 3;
    } else if (e.target.id == "less") {
        lines = Math.max(0, lines - 3);
    } else {
        return;
    }
    var html = "";
    for (var i = 0; i < lines; ++i) {
        html += "content " + (i + 1) + "<br>";
    }
    document.querySelector("article").innerHTML = html;
};