Html 如何使div在兄弟div之间调整大小并可滚动

基本上，我有这个角度材料侧导航与可扩展的导航项目

我想使第二个div在项目扩展到第三个div之外时可以滚动，也可以调整大小，因此当我减小窗口大小时，它应该始终调整大小以适应div 1和div 3之间的大小

我使用以下样式实现了滚动行为：

title-div {
    min-height: 10%;
}

items-div {
    
    height: 80% //To force the info-div to be positioned at the bottom
    max-height: 80%
    overflow: auto;
}

info-div {
    min-height: 10%;
}

---

但是，调整大小的操作不正常。在某个高度，信息分区（3）开始被切断，而不是项目分区（2）的大小变小，以适应信息分区。我怎样才能做到这一点呢？

当您将第二次跳水的高度设置为它应该占据的相对空间，并使用

溢出：自动
时，它应该可以工作

POC：


*{
框大小：边框框；
保证金：0；
}
.集装箱{
宽度：100px；
边框：实心2px；
}
.1，
.三{
背景：蓝色；
边框：实心1px；
高度：50px；
填充：10px；
}
.二{
填充：10px；
溢出：自动；
高度：计算（100vh-100px）；
}

标题
主体
主体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体
标题
当您将第二次跳水
高度设置为它应该占据的相对空间，并使用
溢出：自动时，它应该可以工作

POC：


*{
框大小：边框框；
保证金：0；
}
.集装箱{
宽度：100px；
边框：实心2px；
}
.1，
.三{
背景：蓝色；
边框：实心1px；
高度：50px；
填充：10px；
}
.二{
填充：10px；
溢出：自动；
高度：计算（100vh-100px）；
}

标题
主体
主体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体
标题
使用flexbox，您可以轻松实现以下目标：


标题
项目
项目
项目
问询处

#侧导航{
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
#侧导航项目{
柔性生长：1；
溢出y：自动；
}

使用flexbox，您可以轻松实现以下目标：


标题
项目
项目
项目
问询处

#侧导航{
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
#侧导航项目{
柔性生长：1；
溢出y：自动；
}