title: Vertical scrollbar appears for unknown reason
body: <p>What causes vertical scrollbar to appear here? <a href="http://codepen.io/anon/pen/QGByOQ?editors=1100" rel="nofollow noreferrer">http://codepen.io/anon/pen/QGByOQ?editors=1100</a></p>
  
  <p>As I suggest, <code>.container</code> is <code>100%</code> height of <code>body</code>, body inherits <code>html</code>, <code>html</code> is 100% of the <code>viewport</code>, hence every <code>.chart</code> should fit perfectly as it's height is half of the <code>.container</code>'s. Nevertheless a y-scrollbar appears. What's the behavior behind this?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="chart1"&gt;&lt;/div&gt;
          &lt;div class="chart1"&gt;&lt;/div&gt;
          &lt;div class="chart1"&gt;&lt;/div&gt;
          &lt;div class="chart1"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.container {
    width: 100%;
    height: 100%;
    border: 5px dashed black;
    box-sizing: border-box;
    font-size: 0;
    overflow: auto;
  }
  
  html, body {
    height: 100%;
  }
  
  body {
    margin: 0;
  }
  
  .chart1 {
    display: inline-block;
    width: 50%;
    height: 50%;
    border: 1px solid red;
    box-sizing: border-box;
  }
  </code></pre>