I am experiencing an issue with my navbar and body container. Whenever the navbar is present, the page automatically scrolls vertically. However, when I remove the navbar, the scrolling behavior stops.
What is causing this scroll behavior with the navbar? How can I prevent the window from scrolling when the navbar is still in place?
.wrapper {
height: 100vh;
max-height: 100vh;
overflow: hidden;
}
.main {
flex: 1 0 auto;
/*overflow-y: auto;*/
}
.inner {
flex: 1 0 0;
overflow-y: auto;
/*
min-height: 100%;
max-height: 100%;
*/
}
.sidebar {
overflow-y: auto;
}
.content {
overflow-y: auto;
flex-grow: 1;
}<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b7babaa1a6a1a7b4a595e1fbe0fbe7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand navbar-light bg-white topbar shadow">
<a class="navbar-brand" href="#">ENG</a>
</nav>
<div class="container-fluid">
<div class="wrapper row">
<div class="col-9 mh-100 inner d-flex flex-column p-0">
<div class="main bg-info p-3 d-flex flex-column">
<div class="p-3 content">
<h3>Main content area</h3>
<p>
Voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolornon numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur...
</p>
</div>
<div class="bg-faded p-3">
inner footer (stick to bottom of content area)
</div>
</div>
<footer class="bg-inverse text-white p-3">
footer (stick to bottom of left)
</footer>
</div>
<div class="col-3 mh-100 bg-faded p-3 sidebar">
<h3>Sidebar</h3>
<p>
This content should scroll independently if needed...
</p>
</div>
</div>
</div>The source reference for this example is located here: Flexbox height issue with nested flex-grow boxes in Bootstrap 4
To view the actual problem and code snippet, visit: