Menu
Doesn't work properly in Chrome or Firefox. Is there any workaround to this?
<!DOCTYPE html> <html> <head></head> <body> <h3>overflow-y:visible</h3> with overflow-x:hidden <div style="overflow-x:hidden;overflow-y:visible;width:100px;height:100px; position:relative;background:#666;"> <div style="top:20px;left:20px; width:420px;height:420px;position:absolute;background:#420;"> </div> </div> without overflow-x:hidden <div style="overflow-y:visible;width:100px;height:100px;position:relative;background:#666;"> <div style="top:20px;left:20px; width:420px;height:420px;position:absolute;background:#420;"> </div> </div> </body> </html> http://jsfiddle.net/sMNyK/
The real life scenario involves components that absolutely must have overflow-x:hidden, but that will trigger popup-menus that need to be able to break free from the element in y-direction. Should I just position those menus outside their parent components, or is there a better fix?
725
It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure.
Definition and Usage The overflow-y property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.
This likely has to do with the issue addressed here: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
In short, when using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.
72
I think you can get what you want with an extra wrapping div that does the hiding but does not have the position: relative set (see fiddle):
<div style="overflow-y:visible;width:100px;height:100px;position:relative;background:#666;"> <div style="overflow-x:hidden"> ooooooooooooooooooooooooooooooooooooooooooooooo <div style="top:20px;left:20px; width:420px;height:420px;position:absolute;background:#420;"> </div> </div> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
