Vertical scrollbar appears for unknown reason
<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>