JSFiddle - React, Tailwind, and code Playground

HTML

<body>        
    <header>
        Header Stuff...
    </header>
    <article>
        Resize shorter vertically to see what happens when the content overflows.<br/>
        1<br/>
        2<br/>
        3<br/>
        4<br/>
        5<br/>
        6<br/>
        7<br/>
        8<br/>
        9<br/>
        10<br/>
        11<br/>
        12<br/>
        13<br/>
        14<br/>
    </article>
    <footer>
        Footer stuff...
    </footer>
</body>

CSS

html {
	height: 100%;
	min-height: 100%;
	font-size: 100%;
}

body {
	margin: 0;
	height: 100%;
	min-height: 100%;
}

header {
	background-color: #FF0000;
	float: left; /* if you want a layout with floated descendants... */
	position: absolute;
	width: 100%;
	top: 0;
	overflow: hidden;
	height: 4.6em;
	border-bottom: 0.15em solid yellow;
}

article {
	background-color: #CCCCCC;
	float: left;
	position: absolute;
	width: 100%;                
	top: 4.75em;
	bottom: 2.75em;
	overflow: auto;
}

footer {
	background-color: #AACCFF;
	float: left;
	position: absolute;
	width: 100%;
	height: 2.75em;
	bottom: 0;
	border-top: 0.15em solid blue;
}