Los anchos de flexbox de IE10 incluyen relleno, causando desbordamiento. tamaño de caja: cuadro de borde no se corrige
El niño flexible de LHS en este ejemplo tiene relleno 1em, y hará que RHS se desborde al padre:
<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>
Aquí está el violín:
¿Cómo puedo eliminar el desbordamiento cuando los niños flexibles tienen relleno?box-sizing: border-box no funciona