css - IE10 flexbox 宽度包括填充，导致溢出。盒子尺寸 : border-box doesn't fix

Question

本例中的 LHS flex child 有 1em padding，它会导致 RHS 溢出 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>

这是 fiddle :

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

当 flex children 有 padding 时，如何消除溢出？ box-sizing: border-box 不起作用。

Answer 1

我在使用 flexbox 和 box-sizing: border-box; 时遇到了类似的问题。后者似乎在 IE 中不起作用。宽度在这种情况下不起作用，因为填充会改变它 - 但如果您可以使用 max-width，那应该可以解决问题。