IE10 flexbox largeurs comprennent le remplissage, causant un débordement. box-sizing: border-box n'est pas corrigé

Le G flex enfant dans cet exemple a cadratin (1 em rembourrage, et il fera des RHS de débordement de la mère:

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

Voici le violon:

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

Comment puis-je éliminer les débordements lors de flex enfants de rembourrage? box-sizing: border-box ne fonctionne pas.

  • Vous pouvez réellement travailler autour de ce pour ligne flexs en utilisant simplement "largeur" dans le CSS. Mais la "hauteur" de ne pas travailler pour la colonne fléchit. Voici la colonne de la version originelle de violon: jsfiddle.net/GY4F4/7
InformationsquelleAutor Graeme Pyle | 2013-10-11