Container with overflow: auto cutting the dropdown content

I have a drawer (side pop-up) with 3 blocks of information, each one is overflow: auto.
The problem occurs when I open one of the dropdowns or popovers, they get cut by the same container.
The desired result is that the dropdown content stays out and over all the rest of the content.

I tried with z-index but doesn’t work.

Example (top-right corner)

Sadly, this is a limitation from css, a child cannot overflow a parent if overflow is set to auto or scroll.
Common pattern to do this will be to render the popup elsewhere in the DOM, and absolute positionned it.
Our component is not able to do this at the moment. I am logging the issue, but that’s a complex one, so I advice to see if you can change your container style.

1 Like

Thanks for the reply! Yeah I think a good solution is to create my own component and place the dropdown content outside the containers right?

Yes best solution will be to teleport the dropdown content :slight_smile: