Overflow-x: hidden and overflow-y: visible adds scrollbars

Question

I have a table row:

<ul>
<li>This</li>
<li>is</li>
<li>my</li>
<li>cell</li>
</ul>

and some CSS:

UL { height: 30px; float: left }
UL LI { width: 25%; height: 100%; float: left }

which works great. However when I add the following CSS:

UL LI { overflow-x: hidden; overflow-y: visible }

scrollbars in the cells become visible.

The default value for overflow is visible and no scrollbars are visible, yet when I change only one of the axis to something else, scrollbars appear.

I need the X axis to be clipped and Y axis visible (for cell text elipses and a dropdown menu).

Answer 1

The problem with overflow-x/y is that you cannot have visible mixed with another value so in your code visible will be treated as auto.