My goal is to design a webpage that remains static without any scrolling. Some specific elements within the page may be allowed to scroll independently, but I am focused on preventing the entire page from scrolling. The main issue arises when a deeply nested child element overflows and triggers a scrollbar, causing the overall document to expand and display an unwanted scrollbar.
Although this is the primary concern, there are other nested levels that might contribute to the problem.
<div class="h-100 d-flex flex-column">
<div class="d-flex align-items-center justify-content-center bg-red" style="height: 7%">
</div>
<div class="d-flex align-items-center justify-content-center bg-red" style="height: 3%">
</div>
<div class="bg-green" style="max-height: 75%; height: 75%; overflow-y: auto;">
<div class="bg-gray m-4" style="height: 2000px;">
The height of this content causes BOTH scroll bars to appear. I only want a bar on the
'green section'
</div>
</div>
<div class="bg-red flex-grow-1">
</div>
</div>
This code pen illustrates the structure of my application. The issue arises when an element overflows within a series of nested flex displays utilizing Bootstrap 4 utility classes.
https://codepen.io/averyferrante/pen/YMdNpO
My objective is to enable scrolling exclusively within the green section in the code pen example, without causing the entire document to expand and scroll.