Html 溢出导致全局滚动条即使与父元素“溢出：自动”一起出现`

我希望有两个容器（示例中为绿色和红色）大小为可用空间的100%（示例中为除页眉外的所有空间）。第二列内容较大，垂直溢出。我只希望第二列有没有正文滚动条滚动条。若我删除了标题，一切都会按预期工作，但在标题下我会看到全局滚动条。为什么?

正文{
填充：0；
保证金：0；
身高：100%；
}
html{
身高：100%；
}
梅因先生{
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.集装箱{
显示器：flex；
弹性：1；
身高：100%；
}
.左{
宽度：200px；
身高：100%；
背景：绿色；
}
.对{
宽度：200px；
身高：100%；
背景：红色；
溢出：自动；
}

标题

这就是你需要的吗？

问题是列也溢出了容器，默认为

overflow:visible

我将容器溢出设置为隐藏
然后我将标题设置为25px fixed（这是可选的）
左列现在应该正确地表示容器高度的100%。
右列应溢出：在父容器内滚动

若您知道右列将垂直溢出，那个么您最好使用：

overflow-y:scroll


正文{
填充：0；
保证金：0；
身高：100%；
}
html{
身高：100%；
}
梅因先生{
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.集装箱{
显示器：flex；
弹性：1；
身高：100%；
溢出：隐藏；
}
.左{
宽度：200px；
身高：100%；
背景：绿色；
}
.对{
宽度：200px；
身高：100%；
背景：红色；
溢出：自动；
}
#标题{
高度：25px；
}

标题
运行您的示例时会遇到完全相同的问题。我看到两个滚动条，我只想在第二个红色容器上有一个滚动条，主体上不应该有滚动条实际上我刚刚注意到你的代码已经在我的浏览器上工作了，你正在用什么浏览器进行测试。在macos上的chrome和safari中，您的代码（和我的代码）对我（红色div上有一个滚动条）很好。还是我误解了你想要实现的目标？我刚刚在Mac上登录了Chrome/Firefox，我的和你的版本都不能正常工作。我看到两个滚动条。编辑了我的答案您对容器类的
overflow:hidden
有何解释？看起来很随机，为什么会有溢出呢？