Use the flex-grow
property to the main content div and give the dispaly: flex;
to its parent;
body {_x000D_
height: 100%;_x000D_
position: absolute;_x000D_
margin: 0;_x000D_
}_x000D_
section {_x000D_
height: 100%;_x000D_
display: flex;_x000D_
flex-direction : column;_x000D_
}_x000D_
header {_x000D_
background: tomato;_x000D_
}_x000D_
div {_x000D_
flex: 1; /* or flex-grow: 1 */;_x000D_
overflow-x: auto;_x000D_
background: gold;_x000D_
}_x000D_
footer {_x000D_
background: lightgreen;_x000D_
min-height: 60px;_x000D_
}
_x000D_
<section>_x000D_
<header>_x000D_
header: sized to content_x000D_
<br>(but is it really?)_x000D_
</header>_x000D_
<div>_x000D_
main content: fills remaining space<br>_x000D_
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>_x000D_
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>_x000D_
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>_x000D_
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>_x000D_
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>_x000D_
</div>_x000D_
<footer>_x000D_
footer: fixed height in px_x000D_
</footer>_x000D_
</section>
_x000D_