Html 使子flexbox容器可滚动

我想使用使用flexbox的全高应用程序，白色区域是一个flex项目，在我的情况下需要滚动，但它似乎不起作用，请参阅

html，
身体{
身高：100%；
}
身体{
显示器：flex；
弯曲方向：立柱；
}
.左{
背景：黄色；
利润率：10px；
flex:050px；
}
.对{
背景：蓝色；
保证金：10px 10px 10px 0；
弹性：10自动；
溢出y：自动；
显示器：flex；
弯曲方向：立柱；
}
.副标题{
flex:0自动；
利润率：10px；
背景#999999；
}
.背景{
弹性：10自动；
溢出y：自动；
利润率：0 10px 10px 10px；
背景：白色；
}

这是主标题
左窗格
这是子标题

只需更改CSS:

overflow-y:scroll而不是
溢出-y：自动
#1-带
位置：绝对
防止超长div拉伸其父级的一个简单方法是将其设置为
位置：绝对
并相对于其
上下文
父级


主体
的初始高度为
100vh
，
主体
的初始高度为
100%
，其将收缩以均匀地适合主体

收割台的高度为
flex:0 0 25px
，因此将保持其固定高度


工作示例

*{
保证金：0；
填充：0；
}
身体{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
}
标题{
背景：红色；
flex:025px；
}
主要{
背景：绿色；
显示器：flex；
弹性：1100%；
}
.左{
背景：黄色；
flex:050px；
利润率：10px；
}
.对{
背景：蓝色；
弹性：10自动；
显示器：flex；
弯曲方向：立柱；
}
.副标题{
背景#999999；
利润率：10px；
}
.背景{
背景：白色；
溢出y：滚动；
利润率：0 10px 10px；
位置：相对位置；
弹性：1；
}
.context>div{
高度：3000px；
位置：绝对位置；
}

这是主标题
左面板
这是子标题
超长div
这没有任何区别。似乎我必须在
main
中设置一个
显式高度，而不是使用
flex:10 auto
来自动拉伸其父级的可用空间。您认为是否可以滚动
上下文
区域，而不在
标题
和
main
，意思是
header->flex:0 auto
，
main->flex:1 0 auto
？问题是我在header中使用了一个boostrap导航条组件，如果我必须给header加一个明确的高度，我需要测量这个
navbar
组件的
高度，此外，如果我将在
标题中的
导航栏下放置一些其他内容，我必须手动计算所有边距、填充和高度，以调整标题的高度。@Z.Neeson-。超长div是
position:absolute
，它的所有父级都玩得很好。@Z.Neeson-不用担心：）基本上，通过创建超长div
position:absolute
，它将从文档的正常流中删除，并且不再对现在忽略它的其他元素产生任何影响。