IE10 flexbox widths include padding, causing overflow. box-sizing: border-box doesn't fix

Question

The LHS flex child in this example has 1em padding, and it will cause RHS to overflow the parent:

<div style="display: -ms-flexbox; box-sizing: border-box; width: 200px; border: 5px solid black">

    <div style="padding: 1em; -ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 33%; background-color: blue; box-sizing: border-box">
        LHS
    </div>

    <div style="-ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 67%; background-color: red; box-sizing: border-box">
        RHS
    </div>

</div>

Here's the fiddle:

http://jsfiddle.net/GY4F4/6/

How can I eliminate the overflow when flex children have padding? box-sizing: border-box doesn't work.

Answer 1

I had similar problems with flexbox and box-sizing: border-box;. The latter one just doesn't seem to work in IE. Width wouldn't work in this case since padding will change it - but if you can use max-width, that should fix the problem.