Css 如何考虑内部可滚动容器的高度与外部容器的高度？

首先，我在浏览器中尝试了这一简化的方法，效果如预期

在我的项目中，我使用了Electron、React、MUI和纯CSS。我不知道是哪一个导致了这个问题。可能只是CSS/Flexbox代码不正确

演示该问题的视频：

请注意，一旦您尝试滚动到内部容器中的“底部”，您需要继续滚动主容器接管的部分；然后滚动到外部容器的底部，以查看内部容器的底部

我试过几种组合。禁用外部容器溢出并将其设置为

隐藏

，并对内部容器使用

自动

。我认为这通常是正确的，因为这是我想要的行为，只允许内部容器滚动。在这种情况下，内部容器被切断，我无法在内部容器内滚动到底部。滚动条只是消失了，因为我正在一个看不见的区域滚动

外部容器的高度正确，并且没有溢出状态栏/页脚

内部容器明显溢出状态栏

在其他尝试中，我还禁用了Electron中所有与窗口相关的选项，但问题仍然存在

要提供一个代码演示来说明这个问题有点困难，但下面是视频显示的“主要”部分

Globals

constyles=（）=>({
“@global”：{
“html，正文”：{
高度：“100%”，
保证金：0
},
“*”：{minHeight:0}，//似乎没有效果。
“#地块根”：{//可能不需要。
高度：“100%”，
保证金：0
}
}
})

组件

容器：{
高度：“100%”，
宽度：“100%！重要”，
显示：“flex”，
flexDirection:'列'，
minHeight:0，//此处由Felix建议，但没有效果。
},
内容：{
弹性：1，
溢出：“自动”，
},
分包商：{
高度：“100%”，
宽度：“50%”，
显示：“flex”，
flexDirection:'列'，
背景颜色：“蓝色”
},
分包：{
弹性：1，
溢出：“自动”，
背景颜色：“灰色”
},

标题
副标题
-----我的可滚动子组件数据----
页脚

使用的所有依赖项都是最新版本

提前感谢您抽出时间

编辑

我发现的唯一解决方法是使用：

高度：计算（100vh-35px）

---

应用于

分包商

，但我不知道那些35px是从哪里来的。我删除了所有元素的填充。我想找到一个真正的解决方案，它不是基于固定的像素大小。。或者至少要了解到底是什么导致了这个问题。

我对您的代码做了一些改进，现在应该可以了

html，
身体{
高度：100%；/*正确布局所需*/
}
身体{
溢出：隐藏；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
.头衔{
flex:0自动；
}
.内容{
flex:1自动；
位置：相对位置；
/*需要这个来定位内部内容吗*/
溢出y：自动；
背景颜色：灰色；
}
.页脚{
flex:0自动；
}

标题
副标题
-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件
数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据
子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据----
-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据
组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据----------
我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件数据-----我的可滚动子组件
数据-----我的可滚动子组件数据-----我的可滚动子组件数据----
页脚

是否尝试删除一个

flex:1

属性？如果

name=title

元素位于

name=content

容器中，是否也会发生变化？我认为问题是由两个嵌套的flex容器引起的。您好，我独立于每个

内容和
子内容删除了
flex:1
，但没有效果。将
name=title
放入
name=content
也没有效果。它以
name=content
div滚动。测试时也没有
flex:1
。您是否尝试将
min height:0
设置为
容器
？这是一个很好的例子，它也使用了
溢出：auto
：另外，请看这个问题：哦，我做了，我忘了在这里添加它。还尝试通过：
“*”：{minHeight:0}
将其添加到全局。法典