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 cells become visible.

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

I need the X axis to be cropped and the Y axis visible (for ellipses of cell text and drop down menu).

Answer 1

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