Html 高度自动，但最大值取决于父级和兄弟级的高度

我在一个300*300px的父div中有三个div。我希望前两个div带有height auto，但第三个div必须有一个max和一个overflow-y滚动条，所以我们将这三个div保留在它们的父div中

正如你所看到的，我需要把绿色的div放在红色的div里面，不管它有多高。你知道如何使用CSS甚至JS来实现这一点吗

片段：

.container{
宽度：300px；
高度：300px；
填充：8px；
背景色：红色；
}
.行{
不透明度：0.9；
}
.第1行{
背景色：rgb（200130,0）；
高度：自动；
}
.row2{
背景色：rgb（200230,0）；
高度：自动；
}
.row3{
溢出y：滚动；
背景色：rgb（0200130）；
}

我的同僚们都是精英。
我的同僚们都是精英。反对者，在大教堂的自然通风处，我要向大家解释，暂时性的铜酸盐是一种劳动。
Lorem ipsum，dolor sit amet Concertetur Adipising Elite。在无生命中的透视术，时间之光的普罗维登蒂。Maiores，dolore veniam alias quam的过失。Odit，fugit voluptatum。Lorem ipsum dolor，坐在amet Concertetur Adipising Elite的位子上。配给，区分。我的朋友们，我的智慧，我的智慧，我的尊严。我的朋友们，我的朋友们！

最好的方法是在CSS中使用flexbox。要将底行保留在父容器内，请添加-

display: flex;
flex-direction: column;

它会将第3行中的所有内容拉入父级

我根据你在CodePen中的问题创建了一个示例

---

我还添加了“框大小：边框框”以拉入8px填充，以使所有内容保持在父级设置的高度和宽度范围内。

如果您想要某个可以自行调整大小的内容，如果您更改父级div高度，您可以尝试此js代码

    var row3 = document.querySelector('.row3')
    var row1 = document.querySelector('.row1')
    var row2 = document.querySelector('.row2')
    var container = document.querySelector('.container')

    var row1Height =parseInt(getComputedStyle(row1).height.replace('px','')) //37.33px
    var row2Height =parseInt(getComputedStyle(row2).height.replace('px','')) //112px
    var containerHeight =parseInt(getComputedStyle(container).height.replace('px','')) //300px

    var row3Height =containerHeight -row2Height - row1Height //132px
    row3.style.height=row3Height.toString()+'px'

---

使用

overflow-y:auto和
框大小：边框框；显示器：flex；弯曲方向：立柱。不要使用javascript
 我需要将300px保存在红色分区中。您可以：）也可以添加这些属性。如果它解决了您的问题，请将此标记为答案。非常感谢。很酷的解决方案，但在实际的项目中，我有很多这样的div，所以我为每个.container创建了一个循环，它运行得非常好。