为什么Flex Box不遵守视口约束

我试图重构昨天做的CSS网格练习,改用flexbox。

我有一个伸缩容器,其高度和宽度受视口大小的限制。我有3个flex项目-标头(具有固定的高度),页脚(具有固定的高度)以及主控件,该主控件将收缩/增长以消耗其余的可见视口。

当main为空时,垂直和水平收缩会按照我的预期进行。如果我放置一个空的flex项占用100%的空间(主空间),则情况相同。

但是,如果我将内部组件作为flex容器并在其中放置一个大于容器的项目,则垂直收缩/生长行为将停止。水平很好。 我希望内部flexbox保持相同的大小,并强制滚动最里面的元素。

这是stackblitz:

https://stackblitz.com/edit/angular-testing-flex I