title: IE10 flexbox widths include padding, causing overflow. box-sizing: border-box doesn't fix
body: <p>The LHS flex child in this example has 1em padding, and it will cause RHS to overflow the parent:</p>
  
  <pre><code>&lt;div style="display: -ms-flexbox; box-sizing: border-box; width: 200px; border: 5px solid black"&gt;
  
      &lt;div style="padding: 1em; -ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 33%; background-color: blue; box-sizing: border-box"&gt;
          LHS
      &lt;/div&gt;
  
      &lt;div style="-ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 67%; background-color: red; box-sizing: border-box"&gt;
          RHS
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the fiddle:</p>
  
  <p><a href="http://jsfiddle.net/GY4F4/6/" rel="noreferrer">http://jsfiddle.net/GY4F4/6/</a></p>
  
  <p>How can I eliminate the overflow when flex children have padding? <code>box-sizing: border-box</code> doesn't work.</p>