Absolute positioned element exceeding (and affecting) scrollable container.

Hello everyone! I recently ran into this tricky situation in which I have an absolute positioned element which is inside of a relative positioned element, which again ist positioned in some other container which allows for vertical scrolling. (there's more to it, but this is a minimal reproducible example). However, the absolute positioned element supposed to be way bigger than the containing element, which cases the container in which they're both placed to be affected.

I tried to reproduce the example in a codepen: https://codepen.io/ConfusedHorse/pen/MWLvMbN

Because this is just a reduced example, the following properties must not be changed:
- the overflow behavior of the containing element
- position relative on the second element

I hope someone has an idea or some helpful impulse. Thank you in advance!

Info: the issue is easier to witness when moving the mouse over the example, so the scrollbars get refreshed.
Was this page helpful?