Css 带flex grow 1的可滚动flex子级

我正在尝试创建一个可滚动的flex子对象，其高度由其flex grow属性决定

例如：

.container{
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
.标题{
背景#9D8189；
flex:0自动；
填充：2rem；
最小高度：10雷姆；
}
.内容{
背景：#FFE5D9；
弹性：10自动；
填充：2rem；
/*使其可滚动，但会破坏flexbox布局*/
最大高度：40vh；
溢出：滚动；
}
.盒子{
背景：#D8E2DC；
填充：7rem；
}

标题
框1
框2
框3

将

最小高度：0

放置到。

内容

类样式，它应该按照您的预期工作

高度：100%

需要计算父级的已知高度，除非元素本身是

HTML

。 您需要：

html，body，{height:100%}

so

.container{height:100%}

作为一种含义，

height

值将从

html

（浏览器窗口）继承，然后由

body

继承，最后由

container

继承

VH

也可以改为使用

%

，以简化操作

.container

应设置为

overflow:hidden

，以允许子级在达到父级限制时滚动

代码示例：

*{
框大小：边框框；
填充：0；
保证金：0；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
高度：100vh；/*更新*/
溢出：隐藏；/*更新*/
}
.标题{
背景#9D8189；
/*flex:0自动*/
填充：2rem；
最小高度：10rem；/*如果需要*/
}
.内容{
背景：#FFE5D9；
flex:1；/*简化*/
填充：2rem；
溢出：自动；/*根据需要滚动*/
}
.盒子{
背景：#D8E2DC；
填充：7rem；
}

标题
框1
框2
框3
框3