title: Why does overflow: hidden add additional height to an inline-block element?
body: <p>In <a href="http://jsbin.com/zowejokuluce/4" rel="noreferrer">this example</a>...</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;body&gt;
    &lt;div&gt;
      &lt;div&gt;foo bar&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>body, html, div {
    height: 100%;
    margin: 0;
  }
  div div {
    display: inline-block;
    overflow: hidden;
  }
  </code></pre>
  
  <p>Why does <code>overflow: hidden</code> cause a vertical scrollbar? Additionally, why is this height not attributed to anything on the page? It's like an invisible margin.</p>
  
  <p>The 100% height of all the elements is intentional. In theory, that should cause the inner-most div to expand to meet the viewport. And it does! ...so long as <code>overflow: hidden</code> is not there, Why?</p>