title: Flex items in a button take unwanted indentation
body: <p>For a reason I'm supposed to set the display property of a button to flex. I have a span as a child element for the button (I'm aware that it is not a standard practice to have a span inside a button but still using to overcome certain limitations). I have noticed that the span takes 0.5px top and right indention. Checked if this is because of displaying the button as flex but to my surprise the span takes the indent even if the button is displayed as a block/inline-block item. There is no regular pattern for the indentation(sometimes on - top/bottom/left/right). If start zooming in/out the indentation disappears.  I have overridden all the default browser stylings for the button but the problem still exists.    </p>
  
  <p>Here is the HTML &amp; CSS I'm using - </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>button {
    
    border: 2px solid #000; 
    padding: 0;
    display:flex;
    margin:30px;
    box-sizing:border-box;
    height: 100px;
    width:300px;
   text-shadow:none;
    box-shadow:none;
    box-shadow:none;
    text-shadow:none;
    outline:0;
    }
  
  button span{
    background:orange;
    width:300px;
    height:100px;
   flex:1 1 auto;
    padding:0;
    color:#000;
    margin:0;
    outline:0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button type="button"&gt;&lt;span&gt;button[type="button"]&lt;/span&gt;&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>PS : Issue in Chrome &amp; Edge (Surface Pro 4, Windows 10)</strong></p>
  
  <p>Spent more than 3 hours to find out the issue but in vain. Can anyone explain me on why this issue is caused ? </p>