Why does "overflow-y:hidden" affect the visibility of items overflowing on the x axis?

Question

Consider this example:

http://jsfiddle.net/treeface/P8JbW/

HTML:

<div id="test">     <img src="http://ycombinator.com/images/y18.gif" /> </div> 

CSS:

#test {     position:relative;     margin-left:50px;     margin-top:50px;     border:1px solid black;     height:50px;     width:50px;     overflow-x:visible;     overflow-y:hidden; } img {     position:absolute;     left:-11px; } 

I'm expecting to see this:

But I'm getting this:

It seems that the overflow-x property is being overridden here. Is that what's actually happening? Assuming that I have to keep the overflow-y set to hidden, is there a way around this behavior?

Answer 1

overflow is intended to be used with elements that are not absolutely positioned. If you want to handle the clipping of an absolutely positioned element, use the clip css property. So to clip on the bottom and top of your containing div, but not the left or right, do this:

#test {     position:relative;     margin-left:50px;     margin-top:50px;     border:1px solid black;     height:50px;     width:50px;     clip: rect(auto,auto,auto,-11px); } 

Sample: http://jsfiddle.net/treeface/UJNcf/6/

Answer 2

From the CSS3 spec:

The computed values of overflow-x and overflow-y are the same as their specified values, except that some combinations with visible are not possible: if one is specified as visible and the other is scroll or auto, then visible is set to auto. The computed value of overflow is equal to the computed value of overflow-x if overflow-y is the same; otherwise it is the pair of computed values of overflow-x and overflow-y.

From this it would seem that some combinations of overflow-x & overflow-y are not valid, and sometimes one will override the other, which would explain what you're seeing here. Though I'm unsure as the wording as a bit unclear and the way browsers actually implement it could vary from the spec (especially when it's hard to decipher).