overflow-y not behaving as expected

[shavenraver]

Overflow-x:hidden;

Overflow-y:visible;

on a parent div doesn’t work as I’d expect.

The child div has more height, but Instead of allowing an overlap, it adds a vertical scrollbar.

A simple

overflow:visible

allows child div to overlap

Same in Chrome and Firefox

[jurek]

Hi,
have the same issue 2 years later and i don’t know how to solve it.
Here’s a pen for a better understanding: http://cdpn.io/LbgmG

thanks guys ;)

[Paulie_D]

Here’s my question.

What are you trying to do? If you want the child content visible, why are you limiting the height of the parent?

[jurek]

should be a slider with an absolut positioned element “outside” the slider.

Here a screenshot: http://www.jurekbarth.de/slider_example.jpg

I’m using the woothemes flexslider for it, if this helps ;)

[Paulie_D]

I doubt this has anything to do with overflow at all then.

[jurek]

when it is set to overflow hidden the yellow box is cutting off. when i set it to overflow visible its okay, but then i get a horizontal scrollbar.

And now there are overflow-x and overflow-y. When i try to set overflow-x to hidden and overflow-y to visible its not working, because i’ll get a vertical scrollbar. Do you understand?

I can fix it with adding an overflow: hidden to the “page-wrap”, but i think thats not the best way solving such problems….

[Paulie_D]

Frankly I think a live link would be the best option so we can see it working (or not).

[Author]

Posts