title: Overflow-y not working when overflow-x is hidden?
body: <p>I have a DIV that contains several other divs. I need divs to be able to peek out of the parent vertically, but not horizontally.</p>
  
  <p>I thought using <code>overflow-x</code> and <code>overflow-y</code> would solve this little problem, but I can only get either x and y to show, or get them both to hide. </p>
  
  <p>My CSS and HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.game {
    position:absolute;
    width:400px; height:300px;
    top:100px; left:100px;
    background-color:#cccccc;
  
    overflow-x:hidden;
    overflow-y:visible;
  }
  
  .block1 {
    position:absolute;
    width:100px; height:100px;
    top:-50px; left:150px;
    background-color:#ffcccc;
  }
  
  .block2 {
    position:absolute;
    width:100px; height:100px;
    top:150px; left:-50px;
    background-color:#ccffcc;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="game"&gt;
    &lt;div class="block1"&gt;&lt;/div&gt;
    &lt;div class="block2"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/p9bvn/" rel="noreferrer">See this JSFiddle:</a> both child divs are cut off, even though overflow-y is set to visible.</p>