CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

Question

Suppose you have some style and the markup:

ul  {    white-space: nowrap;    overflow-x: visible;    overflow-y: hidden;  /* added width so it would work in the snippet */    width: 100px;   }  li  {    display: inline-block;  }

<div>    <ul>      <li>1</li> <li>2</li> <li>3</li>      <li>4</li> <li>5</li> <li>6</li>      <li>7</li> <li>8</li> <li>9</li>      <li>1</li> <li>2</li> <li>3</li>      <li>4</li> <li>5</li> <li>6</li>      <li>7</li> <li>8</li> <li>9</li>      <li>1</li> <li>2</li> <li>3</li>      <li>4</li> <li>5</li> <li>6</li>      <li>7</li> <li>8</li> <li>9</li>    </ul>  </div>

When you view this. The <ul> has a scroll bar at the bottom even though I've specified visible and hidden values for overflow x/y.

(observed on Chrome 11 and opera (?))

I'm guessing there must be some w3c spec or something telling this to happen but for the life of me I can't work out why.

JSFiddle

UPDATE:- I found a way to acheive the same result by adding another element wrapped around the ul. Check it out.

Answer 1

After some serious searching it seems i've found the answer to my question:

from: http://www.brunildo.org/test/Overflowxy2.html

In Gecko, Safari, Opera, ‘visible’ becomes ‘auto’ also when combined with ‘hidden’ (in other words: ‘visible’ becomes ‘auto’ when combined with anything else different from ‘visible’). Gecko 1.8, Safari 3, Opera 9.5 are pretty consistent among them.

also the W3C spec says:

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

Short Version:

If you are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.

Answer 2

another cheap hack, which seems to do the trick:

style="padding-bottom: 250px; margin-bottom: -250px;" on the element where the vertical overflow is getting cutoff, with 250 representing as many pixels as you need for your dropdown, etc.