[ghoomketu]

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.

[FooBarWidget]

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]

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]

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;

[allannienhuis]

oh, great tip - thanks! That's much more explicit. The other approaches have the new stacking context as almost a side effect.