I'm facing an issue with a sliding carousel where the overflow-x property is set to hidden. The carousel displays 4 items at a time, and each item contains a button that triggers a pop-out menu positioned relative to its parent item. The problem arises when the pop-out menu is longer than the carousel container and gets cut off, becoming scrollable.
My goal is to make the pop-out menu fully visible without being clipped by the carousel's overflow. I'd prefer to solve this using CSS before turning to JavaScript. However, most online resources only cover examples involving parent and direct child elements, neglecting nested child elements like in my case. Any assistance would be greatly appreciated.
<div class='carousel'> //has overflow-x hidden
<div class='item'> //multiple item elements
<div class='wrapper'> //relative positioned wrapper
<div class='pop-out'> //absolutely positioned pop out
<div class='pop-out-list'> //list that contains multiple items which are cut off
<div class='pop-out-item'>
...
</div>
</div>
</div>
</div>
...
</div>
For a better understanding of this issue, view this demonstration on JSFiddle: https://jsfiddle.net/84p9gkru/