<head>
<title>Title of the document</title>
<style>
html,
body {
height: 100%;
margin: 0;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted #0313fc;
}
.box .row.header {
flex: 0 1 auto;
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
.box-container {
display: contents;
}
</style>
</head>
<body>
<div class="box">
<div class="box-container">
<div class="row header">
<p>header (sized to content)</p>
<img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg" height="150px" width="150px" />
<!-- add this line -->
</div>
<div class="row content">
<p>content (fills remaining space)</p>
</div>
<div class="row footer">
<p>footer (fixed height)</p>
</div>
</div>
</div>
</body>