Flex: take remaining free space of screen height [duplicate] - html

Question

This question already has answers here:
Fill the remaining height or width in a flex container
(2 answers)
Make a div fill the height of the remaining screen space
(41 answers)
Closed 5 years ago.
This is the typical adaptive layout problem:
Header is always at the top of the screen.
Footer is always at the bottom of the screen.
We should not set the header and footer height: it calculates naturally from contains height and paddings. So, the solution with height calculating and positioning will not use here.
The middle section is scrollable. It must take all remaining space between header and footer.
Flex will help here. However: how I should to setup the middle section to make it take remaining space between header and footer? I almost did it, but it is not perfect yet: there is the extra scrollbar remains.
*{
box-sizing: border-box;
}
.flexContainter {
display: flex;
flex-direction: column;
height: 100vh
}
.header{
background: teal;
padding: 5px;
flex-shrink: 0; /* header must not shrink in any case */
}
.header > .dummyContains{
height: 20px;
background-color: HotPink;
}
.footer{
margin-top: auto;
background: DarkSalmon ;
padding: 5px;
flex-shrink: 0; /* header must not shrink in any case */
}
.footer > .dummyContains{
height: 20px;
background: LightGreen;
}
.middle{
background: LavenderBlush;
overflow-y: scroll;
}
<div class="flexContainter">
<div class="header">
<div class="dummyContains"></div>
</div>
<div class="middle">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque eu sem fermentum dapibus. Curabitur sollicitudin nec magna quis imperdiet. Morbi auctor massa nisi, non hendrerit leo faucibus sed. Donec pulvinar, dolor eget consequat semper, quam est ullamcorper nunc, vel rutrum justo lacus eget neque. Nunc fermentum, velit quis consectetur scelerisque, justo velit vestibulum nunc, vitae malesuada metus nulla eget eros. Vestibulum porta at justo ut condimentum. In consectetur mattis eros eget porttitor. Nam dapibus mi a lobortis tristique. Vestibulum et semper urna. Aliquam lacinia felis a tortor viverra, quis posuere orci vehicula. Integer varius laoreet elementum. Pellentesque varius metus arcu. Aliquam sodales nisi vitae diam convallis, non luctus nisl ultrices. Etiam faucibus dui non elit bibendum finibus. Nulla vulputate a sem eu semper. Morbi vel mattis elit. Nullam velit nibh, laoreet non ligula at, luctus faucibus mi. Duis non maximus ligula. Phasellus convallis eros quis justo gravida molestie.
Suspendisse sit amet neque quis dui tincidunt mattis eget sed dui. Cras egestas ante ante. Vestibulum vulputate pretium condimentum. Pellentesque a placerat nunc. Donec in urna ac mauris tristique mattis sit amet ut ex. Nullam ac sapien nisi. Donec vitae eros faucibus, imperdiet erat eu, tincidunt velit. Etiam gravida velit id volutpat tempus. Nunc odio odio, tincidunt et mi sit amet, aliquam lobortis tortor. Donec finibus libero vel risus luctus dictum. Pellentesque tristique nunc rhoncus magna scelerisque, sit amet gravida urna laoreet. Vestibulum nec orci ac lorem volutpat rutrum.
</div>
<div class="footer">
<div class="dummyContains"></div>
</div>
</div>