Flex：占用屏幕高度的剩余可用空间

Question

这是典型的自适应布局问题：

• 标题始终位于屏幕顶部。
• 页脚始终位于屏幕底部。
• 我们不应该设置页眉和页脚高度：它从包含高度和填充自然计算。因此，高度计算和定位的解决方案不会在这里使用。
• 中间部分是可滚动的。它必须占用页眉和页脚之间的所有剩余空间。

Flex将在这里提供帮助。但是：我应该如何设置中间部分以使其占用页眉和页脚之间的剩余空间？我几乎做到了，但它还不完美：还有额外的滚动条。

*{
  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>