css - for - multiline-flexbox en IE11 ¿calcula el ancho incorrectamente?

flex css

Question

Parece que IE11 no calcula correctamente el ancho de los artículos flex-wrap: wrap si se usa flex-wrap: wrap .

Ver http://jsfiddle.net/MartijnR/WRn9r/6/

Las 4 cajas tienen una base flexible: 50%, así que deberíamos obtener dos líneas de dos cajas cada una, pero en IE11 cada caja tiene una línea. Al establecer el borde en 0, funciona correctamente.

¿Alguna idea de si esto es un error, o si hay alguna manera de hacer que IE11 se comporte (y aún use bordes)?

<section>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</section>

section {
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    box-sizing:border-box;
    margin:0;
}
.box {
    border: 1px solid black;
    background: #ccc;
    display: block;
    -ms-flex: 50%;
    -moz-flex: 50%;
    -webkit-flex: 50%;
    flex: 50%;
    box-sizing: border-box;
    margin:0;
}

PD: En mi proyecto, solo la última versión de navegadores populares necesita ser respaldada, afortunadamente, pero IE11 es uno de ellos.

Answer 1

Parece un error cuando box-sizing no se tiene en cuenta al calcular el tamaño con la propiedad flex . Como el borde ocupa 2px, es más grande que 50% y, por lo tanto, solo uno se ajusta a una línea, por lo que todas las cajas se estiran al ancho completo. Puede ver lo mismo que sucede si desactiva el borde y agrega relleno 2px en su lugar.

Puede hacer que funcione correctamente manteniendo los bordes agregando max-width: 50% al conjunto de reglas .box . De lo contrario, puede usar un valor flexible entre 33.34% y 49%. Esto hará que el ancho sea inferior al 50%, incluido el borde, y a medida que los elementos crezcan para llenar el espacio disponible, seguirán siendo el 50% del contenedor flexible. Es un tipo de hack feo, pero funcionará a menos que agregue un borde combinado y un relleno mayor al 50% menos el valor de flexión que configure.

Quizás una forma mejor que disminuir el valor porcentual directamente es usar calc() . Esto es compatible con todos los navegadores compatibles con la sintaxis moderna de Flexbox. Solo necesita restar el total combinado de los márgenes y márgenes izquierdos y derechos del valor porcentual que desea usar. Mientras haces esto, realmente no necesitas la propiedad de tamaño de caja para que pueda eliminarse. Parece haber otro problema en IE donde no puede usar calc en la abreviatura de flex pero puede usarlo en la propiedad de flex-basis , que es la que desea.

.box {
    border: 1px solid black;
    /* additional styles removed for clarity */

    /* 
    50% - (border-left-width + border-right-width +
           padding-left + padding-right)
    */
    -webkit-flex-basis: calc(50% - 2px);
    flex-basis: calc(50% - 2px);
}

Vea la demostración: http://jsfiddle.net/dstorey/78q8m/3/

Answer 2

Philip Walton tiene un excelente resumen de este error aquí: https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box . Él propone dos soluciones, la más fácil de las cuales es establecer flex-basis: auto y declarar un width lugar. (No max-width o max-width min-width ). Esta solución tiene la ventaja de no tener que ajustar su calc() cuando se cambian los anchos de relleno o borde.

Answer 3

Recibí una solución en el foro de Microsoft de Rob. Consulte social.msdn.microsoft.com/Forums/ie/en-US/…

Configuración de un min-width y cambio a flex:auto hace que las cajas se comporten, manteniendo su flexibilidad .

Consulte http://jsfiddle.net/MartijnR/WRn9r/23/ y a continuación para obtener un ejemplo un poco más avanzado con la solución alternativa:

<section>
    <div class="box fifty">1</div>
    <div class="box twentyfive">2</div>
    <div class="box twentyfive">3</div>
    <div class="box fifty">4</div>
    <div class="box fifty">5</div>
</section>


section {
    display: -moz-webkit-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    box-sizing:border-box;
    margin:0;
}
.box {
    border: 1px solid black;
    background: #ccc;
    display: block;
    box-sizing: border-box;
    margin:0;
    -ms-flex: auto;
    -moz-flex: auto;
    -webkit-flex: auto;
    flex: auto;
}
.fifty {
    min-width: 50%;
}
.twentyfive {
    min-width: 25%;
}

Answer 4

Esto es claramente un error de IE así que abandone el CSS original [correcto] y anexe un truco que se dirige a IE10 +:

/* IE10+ flex fix: */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .box {
        flex: 0;
        min-width: 50%;
    }
}

http://jsfiddle.net/stedman/t1y8xp2p/