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:

Answer 1

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