title: Bug with overflow-y:scroll and position:absolute in Chrome
body: <p>A DIV is not being rendered (its height remains zero) in Chrome when applying overflow-y: scroll and position: absolute. If any of those is removed, the box is rendered.
  This doesn't occur in Firefox.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="big"&gt;&lt;/div&gt;
      &lt;div&gt;
          &lt;ul&gt;
              &lt;li&gt;Element #1&lt;/li&gt;
              &lt;li&gt;Element #2&lt;/li&gt;
              &lt;li&gt;Element #3&lt;/li&gt;
              &lt;li&gt;Element #4&lt;/li&gt;
              &lt;li&gt;Element #5&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#container ul {
      list-style: none;
      margin: 0;
      overflow-y: scroll;
      position: absolute;
      top: 31px;
      left: 0;
      right: 0;
      bottom: 0;
  }
  
  #container {
      height: auto;
      display: -moz-box;
      display: -webkit-box;
      display: box;
  }
  
  #container div{
      position: relative;
      height: 100%;
      width: 200px;
  }
  
  #container div.big{
      height: 500px;
  }
  </code></pre>
  
  <p>Here's a fiddle showing the problem:
  <a href="http://jsfiddle.net/351bj7k4/5/" rel="nofollow">http://jsfiddle.net/351bj7k4/5/</a></p>