Html 如何在固定容器内使用flexbox？

我有一个div是

位置：fixed在视口中。其中有一系列子元素，它们使用
display:flex我需要一个可滚动的元素来填充弯曲元素100%的高度。我遇到的问题是，由于可滚动元素的父元素有一个固定的高度，所以可滚动元素只是推动了弯曲元素的底部，而不是滚动

请参见下面的JSBin示例。在本例中，蓝色块需要扩展到红色块高度的100%，蓝色块的内容仍然可以滚动。需要在IE10+、最新Firefox和Chrome中工作：

有两个主要问题导致布局问题。下文分别对其进行了说明：







*{
框大小：边框框；
最小高度：0；
}
身体{
背景色：#eaeaea；
}
#菜单{
背景色：#fff；
位置：固定；
顶部：20px；
右：20px；
左：20px；
底部：20px；
填充：0；
z指数：12；
高度：计算（100vh-40px）；
}
#菜单内容{
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
#菜单窗格包装器{
显示器：flex；
弹性：1；
背景色：#eeffcc；
}
#菜单窗格{
弹性：1；
显示器：flex；
}
.菜单窗格{
框大小：边框框；
背景色：#ff0000；
宽度：20%；
填充：10px；
显示器：flex；
}
.菜单窗格溢出{
弹性：1；
溢出x：隐藏；
溢出y：滚动；
背景色：浅绿色；
}
.菜单项{
填充物：5px；
}

标题
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
像这样的吗？几乎-它在Firefox中似乎不起作用。解决了这个问题并发布了答案。