overflow-y:visible not working when overflow-x:hidden is present [duplicate]

Answer 1

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.

Answer 2

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>