Html 创建带有滚动元素的全高柔性布局

我想创建一个flex布局，它由三列组成，每列全高。问题是，我希望它们内部的三个div始终从上到下均匀拉伸，但外部div的最后一个元素的高度不应超过高度的40%，如果它想拉伸更多，则应滚动。我不确定我是否使用了正确的方法，因此欢迎提供任何帮助。这里是小提琴：

正文{
保证金：0；
填充：0；
}
.集装箱{
宽度：100%；
}
标题{
背景颜色：浅蓝色；
}
页脚{
背景颜色：浅蓝色；
位置：绝对位置；
底部：0；
宽度：100%；
}
ulli{
显示：内联块；
}
主要{
显示器：flex；
}
旁白{
背景颜色：浅绿色；
宽度：30%；
显示器：flex；
证明内容：之间的空间；
弯曲方向：立柱；
}
.中柱{
背景颜色：浅粉色；
宽度：40%；
}
.第一部分{
溢出y：滚动；
}
.第二部分{
溢出y：滚动；
}
.第三部分{
最大高度：50%；
溢出y：滚动；
}

某些链接
某些链接
某些链接
某些链接

一些文本
一些文本
一些文本
我的同僚们都是精英。在享有特权的情况下，所有人都有权拥有自己的权利！小脑大盲肠。
右栏

某些链接
某些链接
某些链接
某些链接

您的路径是正确的，但是在没有视口高度的情况下，子对象上的

height

不只是做任何事情，您必须使用视口高度并从中减去页眉和页脚的高度。

高度：计算（100vh-76px）

。然后对于3个儿童div，其高度将为

33.33%

---

另外，只有当内容超过演示中第一个div的高度时，使用

scroll-y:auto

才会显示滚动条。

类似的内容？完全正确……谢谢！我会接受它作为一个正确的答案，不确定我是否可以在评论中这样做