overflow-y:visible not working when overflow-x:hidden is present<>
This question already has an answer here:
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.
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>