CSS-flex增加高度并启用溢出

问题：无法在flex grow子级上启用溢出

例如：

• Div1 flex将扩展到内容
• Div 2 flex增长以填充可用的
• Div2.1位于Div2中&更高，所以我想启用溢出，但它不断增长，超过并扩展了身体高度
• Div3 flex成长为内容

如何使div 2.1增长到div 2的大小，同时启用溢出？

HTML

<div class="container">
 <div class="flex-fitcontents">
    <p> "Fit contents" </p>
 </div>
 <div class="flex-fillremaining">
    <p> "Take up remaining space" </p>
    <div class="flex-fillparent">
        <p> "Fill parent" </p>
        <p> "Content" </p>        
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "This content should be in the overflow" </p>
    </div>
 </div>
 <div class="flex-fitcontents">
    <p> "Fit contents" </p>      
 </div>    
</div>

---

您可以尝试将溢出自动添加到flex FillResisting，以便其子项具有滚动条

.flex{
位置：相对位置；
flex:1自动；
背景色：红色；
溢出：自动；
}

如果我理解正确，您的意思与下面的示例类似。在

flex-fillparent

中设置高度可以解决此问题

.container{
高度：500px；
宽度：500px；
显示器：flex；
弯曲方向：立柱；
}
.flex-fitcontents{
flex:01自动；
背景颜色：蓝色；
}
.剩余弹性填料{
位置：相对位置；
flex:1自动；
背景色：红色；
}
.flex-fillparent{
flex:1自动；
背景颜色：绿色；
溢出：自动；
高度：3雷姆；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。罗汉松。二者皆有效率。佩伦茨克（Pellentsque）是一位伟大的尤伊斯莫·普尔文纳（euismod pulvinar），康茂德（commodo est）是一位伟大的诗人，他只是一位非侵权者。
在nec的尊严托托。佩伦茨克·尼布·胡斯托（Pellentesque nibh justo），临时助理，莫利斯·维塔普·普鲁斯（mollis Vita purus）。埃尼安·索利西图丁·斯克利斯·布兰迪特。在hac habitasse Plateum，一句名言

“占用剩余空间”

“填充父对象”

“内容”

“内容”

“内容”

“内容”

“内容”

“内容”

“内容”

“内容”

“内容”

“内容”

“内容”

“内容”

“内容”

“内容”

“内容”

“此内容应位于溢出中”

Lorem ipsum dolor sit amet，是一位杰出的献身者。罗汉松。二者皆有效率。佩伦茨克（Pellentsque）是一位伟大的尤伊斯莫·普尔文纳（euismod pulvinar），康茂德（commodo est）是一位伟大的诗人，他只是一位非侵权者。
在nec的尊严托托。佩伦茨克·尼布·胡斯托（Pellentesque nibh justo），临时助理，莫利斯·维塔普·普鲁斯（mollis Vita purus）。埃尼安·索利西图丁·斯克利斯·布兰迪特。在hac habitasse Plateum，一句名言

你的意思是这样的？

.container {
    height: 500px;
    width: 500px;
    display: flex;
    flex-direction: column;
}
.flex-fitcontents {
    flex: 0 1 auto;
    background-color: blue;
}
.flex-fillremaining {
    position: relative;
    flex: 1 1 auto;
    background-color: red;
}
.flex-fillparent {
    flex: 1 1 auto;
    background-color: green;
    overflow: auto;
}