Css Overflow-y: Visible, Overflow-x: Hidden

I have read this CSS overflow-x hidden and overflow-y visible (and a lot of other posts) but i can't get this to work in my specific case. I'm using ths slick-slider and want to ad

Solution 1:

Setting overflow-x or overflow-y to hidden causes the other to be treated as if it has a value of auto. So slick-slider adds a scrollbar for any overflow in the y direction.

You can normally get around this by adding position: absolute. However, absolute positioning is based on the closest parent element with relative positioning. In this case, that's slick-slide, which is a child of slick-slider. As a result the dropdown is still positioned inside of slick-slider and doesn't overflow.

To resolve the issue remove position: relative from all classes that currently have it. I recommend adding position: relative to the wrapper class as well.

Solution 2:

The problem is in .slick-slider class. If you set a little bigger height you can get past overflow, although I don't know why overflow:visible doesn't work.