6 ms·
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 div
by ghoomketu 3y 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.
- FooBarWidget 3y agoI 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 3y agoI'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 3y agoI'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 3y agooh, great tip - thanks! That's much more explicit. The other approaches have the new stacking context as almost a side effect.