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

possible duplicate of css overflow-x visible and overflow-y hidden causes scroll bar — Jared
– Jared, Commented Jun 18, 2013 at 4:55
It appears to be a known "bug". Thanks "Related questions" in the sidebar for leading me to the other question! — Jared
– Jared, Commented Jun 18, 2013 at 4:57
can we have the fiddle demo of the problem so that we can identify the issue? — SaurabhLP
– SaurabhLP, Commented Jun 18, 2013 at 6:23
@SaurabhLP If you really want to you can create your own fiddle since I actually wrote out the HTML and CSS in my question from scratch. The question has already been answered and you can learn more about it through the other question linked. ;) — Jared
– Jared, Commented Jun 18, 2013 at 6:42

redditor · Accepted Answer · 2013-06-18 05:02:45Z

14

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.

answered Jun 18, 2013 at 5:02

redditor

4,4011 gold badge23 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related