top | item 39361583

(no title)

ghoomketu | 2 years ago

Really nice tutorial. On a related note, can somebody tell me how to make a nested div overflow (scrollbar) without specifying the height of all the parents divs?

    <div style="height: 100vh" id="one">
        <div id="two">
            <div id="three" style="overflow: auto">
                I need
            </div>
        </div>
    </div>
This is a rather simple example, but sometimes the divs are nested really deep inside and unless I specify all the childs divs as 100% height there is no scrollbar. This causes me a lot of issues.

discuss

order

FooBarWidget|2 years ago

I solved this a while ago. If memory serves me correctly, you need to set overflow none on div two. Of this doesn't work, let me know and I can check my codebase next time it's convenient.

allannienhuis|2 years ago

I'm too lazy/busy to confirm/test this, but providing a new stacking context on the parent by either by adding a position: relative (or whatever) or adding transform: translateZ(0) (or X or Y) avoids the need to specify every parent's height. Someone less lazy than me could confirm :)

cfj|2 years ago

I'm just as lazy as you, but I just wanted to point out that you can create a new stacking context explicitly with

isolation: isolate;