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).