JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<body>
	<div class="container">
		<header>Шапка</header>
    
		<main>  Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br><img src="https://media.makeameme.org/created/nani-5aa6e8.jpg">
   
    </main>
		<footer>Подвал</footer>	
	</div>	
</body>
</html>

CSS

*, ::after, ::before {
    box-sizing: border-box;
}

html {
    display: flex;
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    overflow-x: hidden;
}

.container {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

.container main {
    flex: 1 1 auto;
    display: block; /* нужно поставить что-то в display, чтобы IE11 не ругался на этот тег (main) */
    background: #eee;
}

.container header,
.container footer {
    max-height: 50px;
    flex: 0 0 50px;
    background: #999;
}