I have a horizontally scrollable toolbar (overflow-x: scroll) with li items containing nested components. These components have position: absolute modals that should remain relative to their li parent. However, the horizontal scroll is clipping the modals, preventing them from overflowing vertically.

When I remove the position: relative class from the parent li, the modals become visible but no longer stay aligned with their parent during horizontal scrolling.

How can I ensure the modals overflow vertically while keeping them aligned with their parent and the toolbar horizontally scrollable?

Here’s a small codepen demonstrating the issue

https://codepen.io/jroc99/pen/JoPKovw

Thanks