css - manejo - Los anchos de flexbox IE10 incluyen relleno, causando desbordamiento. tamaño de caja: cuadro de borde no se corrige

inline flex

Question

En este ejemplo, el niño flexible de LHS tiene un relleno 1em, y hará que RHS se desborde del 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:

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

¿Cómo puedo eliminar el desbordamiento cuando los niños flexibles tienen relleno? box-sizing: border-box no funciona.

Answer 1

El problema parece ser el valor para -ms-flex-negative: 0 en el cuadro que tiene el relleno, si se establece en 1, parece funcionar.

El fondo de RHS ahora permanecerá dentro del cuadro, sin embargo, su contenido no lo hará, aunque es lo mismo con LHS. Agregar max-width: 100% a las correcciones de LHS que, pero no en RHS, pero agregar word-break: break-all hace que el contenido se rompa y permanezca dentro del cuadro de RHS.

Fiddle

¿Es esto lo que quieres?

Answer 2

En IE, flex-basis no tiene en cuenta el box-sizing:border-box . Es un error conocido como se describe aquí: https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box

Aunque se ha arreglado en Edge ahora.

Algunas correcciones:

• Aplicar margen negativo a su envase para contrarrestar el relleno infantil.
• Use flex-basis: calc($basisValue - $paddingValue) ← esto funcionó mejor para mí
• Use pseudo-elementos en lugar de relleno, los pseudo-elementos no cuentan como ancho
• Utilice flex-basis: auto
• Limite el ancho explícitamente: max-width: $value

Answer 3

Pude resolver esto agregando:

-ms-flex-preferred-size: calc($basisValue - $paddingValue * 2);

Así que esta combinación funcionó, incluso cuando usamos autoprefixer :

.element {
    padding: 1rem;
    flex: 0 1 20%;
    -ms-flex-preferred-size: calc(20% - 2rem);
}

El valor de cálculo fácilmente anuló los prefijos generados automáticamente, solo notados por IE.

Answer 4

Tuve problemas similares con flexbox y box-sizing: border-box; . El último simplemente no parece funcionar en IE. El ancho no funcionaría en este caso ya que el relleno lo cambiará, pero si puedes usar max-width , eso debería solucionar el problema.