Mixing overflow-y and overflow-x

Hey team,

I have a certain problem with forms and overflows

Imagine having the following structure
form
form-group
label + input + tooltip
label + input + tooltip
label + input + tooltip
....

On the form element, there is an overflow-y: auto, because it can have various length, and base on the length I would like to show a scroll bar or not (only on the y axis)
I have the tooltips for a row, which are clickable. When I click to the tooltip, it should show a box, like popup with some text.
Unfortunately, the overflow-y makes it buggy, because half of the popup is hdden and a horizontal scrollbar pops up.

I tried to put overflow-x: visible everywhere, but while I have the overflow-y on form, it does not matter for it.

Can someone help me out here?
image.png
Was this page helpful?