title: What causes the horizontal scrollbar to appear on Chrome in the following most trivial HTML?
body: <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  
    &lt;body&gt;
      &lt;div&gt;
        &lt;input type="text"&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> body {
     font:13px/1.231 arial;
   }
   input {
     font:99% arial;
   }
   div {
     display: inline-block;
     overflow: auto;
   }
   input {
     width: 15em;
   }
  </code></pre>
  
  <p>The result on Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/Gbrjz.png" alt="enter image description here"></p>
  
  <p>The jsFiddle - <a href="http://jsfiddle.net/XBvWb/18/" rel="noreferrer">http://jsfiddle.net/XBvWb/18/</a></p>
  
  <p>Note that neither FF nor IE9 show this scrollbar.</p>
  
  <p>Can anyone enlighten me, please, what is going on?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Removed the input border, padding and margin - <a href="http://jsfiddle.net/XBvWb/41/" rel="noreferrer">http://jsfiddle.net/XBvWb/41/</a></p>