When I view the snippet below in Firefox, I notice that the div with the class h-100 is taking up the entire page height (100vh), resulting in an unnecessary second scroll bar due to the added height of the nav.
What I really want is for only the div with overflow-y: auto to have a scrollbar.
Interestingly, this issue doesn't occur when I test it in Chrome and Safari.
Could there be something wrong with my HTML/CSS, and how can I resolve this inconsistency across browsers?
.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>