html - Flex with overflow 和 bootstrap navbar 在 Firefox/Chrome/Safari 中表现不同

Question

当我使用 Firefox 显示下面的代码片段时，类 h-100 的 div 被分配了整个页面高度 (100vh) ，然后添加 nav 的高度，以便生成第二个滚动条。

我想要的是只有 overflow-y: auto 的 div 应该有滚动条。

奇怪的是，代码在 Chrome 和 Safari 中的行为似乎符合我的要求。

我的 HTML/CSS 有问题吗？我该如何解决这种行为差异？

.grey {
  background-color: grey;
}

#foo {
  background-color: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div id="root">
  <div style="height: 100vh; display: flex; flex-direction: column">
    <nav class="navbar navbar-dark navbar-expand bg-dark"><a class="navbar-brand" href="/">Title</a></nav>
    <div class="h-100" style="display: flex; flex-direction: row">
      <div style="flex: 1 1 auto; overflow-y: auto">
        <div id="foo" style="height: 1200px">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

设置溢出隐藏到父div。

.grey {
  background-color: grey;
}

#foo {
  background-color: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div id="root">
  <div style="height: 100vh; display: flex; flex-direction: column">
    <nav class="navbar navbar-dark navbar-expand bg-dark"><a class="navbar-brand" href="/">Title</a></nav>
    <div class="h-100" style="display: flex; overflow: hidden; flex-direction: row">
      <div style="flex: 1 1 auto; overflow-y: auto">
        <div id="foo" style="height: 1200px">
        </div>
      </div>
    </div>
  </div>
</div>