overflow-y:visible not working when overflow-x:hidden is present
css, html
Solution
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`.
Problem
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?