title: Nested divs producing a scrollbar. Why?
body: <p>I have 3 nested divs:</p>
  
  <pre><code>&lt;div class="outer"&gt;
    &lt;div class="inner"&gt;&lt;div class="item"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The .inner div is position absolute and they each have 1px border:</p>
  
  <pre><code>.outer{
    width:50%;
    height:100px;
    border: 1px solid red;
    position:relative;
    overflow-x:hidden;
    box-sizing:border-box;
  }
  .inner{
    border:1px solid blue;
    height:100%;
    position: absolute;
    box-sizing: border-box;
  }
  .item{
    width:100px;
    height:100%;
    background-color:yellow;
    display: inline-block;
    border:1px solid green;
    box-sizing:border-box;
  }
  </code></pre>
  
  <p>This arrangement results in a scrollbar on the .outer div. </p>
  
  <p>Here's a <a href="http://codepen.io/anon/pen/ojWVVN">codepen</a></p>
  
  <p>Why is this and what do I need to change to stop it happening?</p>
  
  <p>If the width of the border of the .inner div is increased to 3px then the scrollbar goes away. Again, why is this happening?</p>