CSS overflow-y: visible, overflow-x: hidden

Question

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 add dropdown-navigation. so i have to use a special markup.

The dropdown should overflow the slider.

I recreated the problem in the fiddle

Thank you for your help!

Answer 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.

Answer 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.