Szerokość Flexbox IE10 obejmuje wypełnienie, powodując przepełnienie. box-sizing: border-box nie naprawia

Question

Oct 11, 2013, 12:55 PM

flexbox css3 css internet-explorer-10 internet-explorer-11

Szerokość Flexbox IE10 obejmuje wypełnienie, powodując przepełnienie. box-sizing: border-box nie naprawia

Elastyczne dziecko LHS w tym przykładzie ma dopełnienie 1em, co spowoduje przepełnienie RHS rodzica:

<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>

Oto skrzypce:

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

Jak mogę wyeliminować przepełnienie, gdy dzieci Flex mają dopełnienie?box-sizing: border-box nie działa.