Javascript 仅在Chrome中滚动html元素

如果您在Chrome中运行下面提到的代码，您将获得所需的结果。包装这两个部分的内部容器（当浏览器窗口缩小时）将显示一个垂直滚动条

但是，如果在Edge或Firefox中执行相同的操作，浏览器只会在整个页面上显示一个垂直滚动条，而不是在给定的容器元素上

我怎样才能让它至少在现代浏览器——Edge、Chrome和Firefox上保持一致

我有以下几点：

正文{
保证金：0；
}
.标题，
.页脚，
.messagebar{
显示器：flex；
身高：4rem；
填充：10px 50px；
边框：1px实心浅灰色；
}
.货柜，
.科{
显示器：flex；
弯曲方向：立柱；
柔性生长：1；
}
.可滚动{
溢出y：自动；
溢出x：隐藏；
}
.科{
利润率：10px 20px；
弹性基准：45%；
flex-grow:0；
}
.内容{
显示器：flex；
柔性生长：1；
}

这是标题
这是菜单
这是一些内容。。。
数据表
这是进一步的内容。。。
其他数据表
这是一条信息
这是页脚

我认为某个高度没有定义。添加特定高度或最大高度，如下所示

.scrollable {

    overflow-y: auto;
    overflow-x: hidden;
    max-height: 92px;

}

多亏了那边的波加尼

答案是将以下内容添加到我的

.scrollable

类中

.scrollable{
   ...
   height: calc(100vh - 14rem);
}

---

这似乎很有魅力

我不知道你是否明白。我确实想要滚动条——我只是想把它们放在我在页面中间指定的元素上，而不是滚动整个页面。你必须禁用在正文和HTML上的滚动。如果你指的是“代码> HTML，体{溢出：隐藏} /代码>，这是确保我完全没有滚动条。不，它没有。您仍将有关于儿童的滚动条。您还必须将html和身体高度设置为100%，您在我上面发布的代码中尝试过吗？因为它所做的只是隐藏所有显示的页面级滚动条。子滚动条仍然没有显示。不幸的是，这违背了目的。这个内部容器应该占据所有可用的空间——因此

display:flex；弹性增长：1