html - 使用 Flex 创建三个带有内容的响应式、垂直堆叠和垂直可滚动的 div

Question

我一直试图这样做无济于事。我可以让三个 div 堆叠和滚动，但是当我垂直调整视口的大小时，似乎 div 没有占用正确的空间，因为底部的空间最终在某些时候被切断了。

我想要这样的东西：

__________
|Scroll  |
|________|
|Scroll  |   
|________|
|Scroll  |
|________|

每个滚动 div 都位于带有 的 flex 框内flex-direction: column，每个都有flex-grow: 1（因此它们每个都占用相同的垂直空间）。知道如何做到这一点吗？

小提琴：https ://jsfiddle.net/7hrau1qo/22/

标签： htmlcssflexboxfrontend