title: Strange behavior of "overflow: auto" on Chrome
body: <p>I'm developing a site with a blog section. I need this section to have a fixed height. In order to be able to see all the posts in the blog I added an <strong>overflow: auto</strong> so it shows a scrollbar when needed.</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="content"&gt;
      &lt;div class="post"&gt;
           This is a long post....
      &lt;/div&gt;
      &lt;div class="post"&gt;
          This is a long post....
      &lt;/div&gt;
      &lt;div class="post"&gt;
          This is a long post....
      &lt;/div&gt;
      ....
      ....
      ....
      ....
  &lt;/div&gt;
  &lt;/div&gt;
  
  #container {
      overflow: hidden;
  }
  
  #content {
      height: 200px;
      overflow: auto;
      border: 1px solid red;
  }
  
  .post {
      margin: 20px 0;
  }
  </code></pre>
  
  <p>I tested this on Chrome, Firefox and IE. The site on Firefox and IE works as expected, but Chrome, although it shows a scrollbar when the list of posts is bigger than the container, adds a white gap the size of the list of posts under the container.</p>
  
  <p>I created a fiddle but I can't reproduce the Chrome behavior there:</p>
  
  <p><a href="http://jsfiddle.net/u5d56/3/" rel="noreferrer">http://jsfiddle.net/u5d56/3/</a></p>
  
  <p>Using <strong>overflow: scroll</strong> instead of auto gives me the same results.</p>
  
  <p>Any ideas?</p>
  
  <p>Thanks in advance</p>