So you can try this:
-
flex-direction: column
for the flex container. -
flex: 1
for the element that needs to fill the remaining space.
See demo below where the flexbox
spans the viewport height:
body {
margin: 0;
}
*{
box-sizing: border-box;
}
.row {
display: flex;
flex-direction: column;
height: 100vh;
}
.flex {
flex: 1;
}
.row, .row > * {
border: 1px solid;
}
<div class="row">
<div>some content</div>
<div class="flex">This fills the available space</div>
<!-- fills/grows available space -->
<div>another content</div>
</div>
Cheers!