html 元素的滚动仅适用于 Chrome答案

【问题标题】：Scrolling of html element only working in Chromehtml 元素的滚动仅适用于 Chrome
【发布时间】：2018-12-27 18:39:53
【问题描述】：

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

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

我怎样才能让它至少在现代浏览器（Edge、Chrome 和 Firefox）上始终如一地工作？

我有以下内容：

body {
  margin: 0;
}

.header,
.footer,
.messagebar {
  display: flex;
  height: 4rem;
  padding: 10px 50px;
  border: 1px solid lightgray;
}

.container,
.section {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.scrollable {
  overflow-y: auto;
  overflow-x: hidden;
}

.section {
  margin: 10px 20px;
  flex-basis: 45%;
  flex-grow: 0;
}

.content {
  display: flex;
  flex-grow: 1;
}

<body style="display:flex;flex-direction:column;flex-grow:1;height:100vh;">
  <div class="header">This is the header</div>

  <div class="content">
    <div class="container">
      <div class="menu">This is the menu</div>
      <div class="container">
        <div class="container scrollable" style="flex-direction: row;flex-wrap:wrap">
          <div class="section">
            <div>This is some content ...</div>
            <div>A table of data</div>
          </div>
          <div class="section">
            <div>This is further content ...</div>
            <div>A table of other data</div>
          </div>
        </div>
      </div>
      <div class="messagebar">This is a message</div>
    </div>
  </div>

  <div class="footer">This is the footer</div>
</body>

要确切了解我在说什么，请运行代码 sn-p，然后选择“整页”选项。

一旦页面显示在其自己的窗口中，您就可以调整窗口大小。水平调整大小应使右侧部分环绕在左侧部分下方。垂直调整大小，直到获得垂直滚动条。在 Chrome 和 Firefox 中都这样做，你会看到垂直滚动条的不同。

【问题讨论】：

不确定你是否理解。我确实想要滚动条——我只想要它们在我在页面中间指定的元素上，而不是滚动整个页面。
你必须在 body 和 html 上禁用滚动。
如果你的意思是 html, body { overflow: hidden } 所做的只是确保我完全没有滚动条。
不，它没有。您仍然会有孩子的滚动条。您还必须将 html 和正文高度设置为 100%
你在我上面贴的代码上试过了吗？因为它所做的只是隐藏所有显示的页面级滚动条。子滚动条仍然没有出现。

标签： javascript html css google-chrome browser

【解决方案1】：

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

.scrollable {

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

}

【讨论】：

不幸的是，这违背了目的。该内部容器应该占用所有可用空间 - 因此display:flex; flex-grow: 1

【解决方案2】：

感谢CssTricks 的 Pogany！

答案是将以下内容添加到我的.scrollable 类中

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

这似乎是一种魅力！

【讨论】：