title: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
body: <p>Suppose you have some style and the markup:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;ul&gt;
      &lt;li&gt;1&lt;/li&gt; &lt;li&gt;2&lt;/li&gt; &lt;li&gt;3&lt;/li&gt;
      &lt;li&gt;4&lt;/li&gt; &lt;li&gt;5&lt;/li&gt; &lt;li&gt;6&lt;/li&gt;
      &lt;li&gt;7&lt;/li&gt; &lt;li&gt;8&lt;/li&gt; &lt;li&gt;9&lt;/li&gt;
      &lt;li&gt;1&lt;/li&gt; &lt;li&gt;2&lt;/li&gt; &lt;li&gt;3&lt;/li&gt;
      &lt;li&gt;4&lt;/li&gt; &lt;li&gt;5&lt;/li&gt; &lt;li&gt;6&lt;/li&gt;
      &lt;li&gt;7&lt;/li&gt; &lt;li&gt;8&lt;/li&gt; &lt;li&gt;9&lt;/li&gt;
      &lt;li&gt;1&lt;/li&gt; &lt;li&gt;2&lt;/li&gt; &lt;li&gt;3&lt;/li&gt;
      &lt;li&gt;4&lt;/li&gt; &lt;li&gt;5&lt;/li&gt; &lt;li&gt;6&lt;/li&gt;
      &lt;li&gt;7&lt;/li&gt; &lt;li&gt;8&lt;/li&gt; &lt;li&gt;9&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>When you view this. The <code>&lt;ul&gt;</code> has a scroll bar at the bottom even though I've specified visible and hidden values for overflow x/y.</p>
  <p>(observed on Chrome 11 and opera (?))</p>
  <p>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.</p>
  <p><a href="http://jsfiddle.net/3xv6A/" rel="noreferrer">JSFiddle</a></p>
  <p><strong>UPDATE:-</strong> I found a way to achieve the same result by adding another element wrapped around the <code>ul</code>. <a href="http://jsfiddle.net/3xv6A/9/" rel="noreferrer">Check it out.</a></p>