CODEWITHSUNDEEP
htmlcssbootstrap-4flexboxoverflow
CuriousGeorge
CuriousGeorge

Reputation: 569

Overflow causing entire page to scroll

I am trying to create a page that doesn't scroll. Certain child elements on the page can scroll, but I'm trying to prevent the page as a whole from scrolling. I have a very nested child element that, when overflowed, receives a scroll bar, but also causes the main document to grow and receive a scroll bar as well.

This is the heart of the issue, but there are a few more nested levels that may be a factor.

<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 demonstrates how my app is set up. The overflowing element is nested deep within many flex displays (coming from bootstrap 4 utility classes).

https://codepen.io/averyferrante/pen/YMdNpO

I want only the green section from the code pen to scroll, not the entire document to grow/scroll as well.

Upvotes: 3

Views: 3618

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371829

The problem is that a couple of your containers are missing height definitions. As a result, the children of those containers ignore the percentage heights applied to them.

Add this to your code:

 <div class="flex-grow-1" style="height: calc(100% - 48px);">

This height rule gives the container a defined height while compensating for the height of its sibling.

Another height rule was missing three levels down:

 <div class="d-flex flex-column w-100" style="height: 100%;">

revised codepen

More detailed explanations:

Upvotes: 3

mike
mike

Reputation: 1863

Did you try playing with position: absolute? You can then set width and height as needed and the red box will see its scrollbar disappear!

Upvotes: 1

Related Questions