title: Setting overflow-y causes overflow-x to change as well
body: <p>When I set <code>overflow-y</code> on a block, it seems to be affecting the <code>overflow-x</code> property. I've made a <a href="http://jsfiddle.net/sgjennings/7fNhx/" rel="noreferrer">JSFiddle with an example of this problem</a>. It seems to be happening in all browsers, so I think I'm missing something that should be obvious.</p>
  
  <p>I have two non-overlapping blocks (blue and green) along with a third block (red) with the following requirements:</p>
  
  <ul>
  <li>The blue and red blocks are adjacent</li>
  <li>The red block is contained in the blue block, but it overlaps the green block</li>
  <li>The blue block must allow vertical scrolling, but not horizontal scrolling</li>
  </ul>
  
  <p>However, if I set <code>overflow-x: visible</code> so the red block overlaps to the right, instead it behaves as though I set it to <code>scroll</code>. However, if I remove the <code>overflow-y</code> property or set it to <code>visible</code>, the red block behaves as I expect.</p>
  
  <p>I do need vertical scrolling, so I'm at a loss for what to do.</p>
  
  <p>With the code below</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="left"&gt;
          &lt;div id="floater"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="right"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#container {
      height: 200px; width: 200px;
      position: relative;
      background-color: #ccc; border: solid 5px black;
  }
  #left {
      position: absolute;
      top: 0; left: 0; bottom: 0; width: 100px;
      overflow-x: visible;
      overflow-y: auto;    /** REMOVING THIS CHANGES THE RESULT **/
      background-color: blue;
      z-index: 2;
  }
  #right {
      position: absolute;
      top: 0; right: 0; bottom: 0; width: 100px;
      z-index: 1;
      background-color: green;
  }
  #floater {
      position: absolute;
      right: -20px; top: 30px; height: 40px; width: 40px;
      background-color: red;
  }
  </code></pre>