El margen automático de Flex no funciona en IE10 / 11

Tengo un diseño complejo donde centro varios elementos vertical y horizontalmente con flexbox.

El último elemento tiene margin-right:auto; aplicado para empujar los elementos hacia la izquierda (y negarlos para centrarlos).

Esto funciona correctamente en todas partes excepto en IE10 / 11 y me está volviendo loco.

Muestra HTML / CSS:

 #container { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-flow: row wrap; -webkit-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -ms-flex-line-pack: center; -webkit-align-content: center; align-content: center; } #second-item { margin-right: auto; } /* just some colors - not important */ #container { height: 200px; width: 100%; background: red; } #container > div { background: blue; padding: 10px; outline: 1px solid yellow; } 
 
first item
second item

http://codepen.io/anon/pen/NrWVbR

Verá dos elementos en la pantalla que deben estar alineados a la izquierda en el lado del elemento primario rojo (es decir, ambos deben estar centrados, pero el último elemento tiene margin-right:auto; aplicado y está llenando toda la línea, empujando el otro elemento y él mismo en el lateral): este es el comportamiento correcto. Excepto en IE10 / 11, donde ambos elementos están centrados incorrectamente, es decir, el margin-right:auto; del segundo elemento margin-right:auto; es ignorado

¿Algún experto de IE / flexbox que haya encontrado algo así antes?

Esto parece ser un error de IE.

De acuerdo con la especificación flexbox:

8.1. Alineación con márgenes automáticos

Antes de la alineación a través de justify-content y align-self , cualquier espacio libre positivo se distribuye a los márgenes automáticos en esa dimensión.

Nota: Si el espacio libre se distribuye a los márgenes automáticos, las propiedades de alineación no tendrán efecto en esa dimensión porque los márgenes habrán robado todo el espacio libre que queda después de la flexión.

En otras palabras, los márgenes automáticos tienen prioridad sobre justify-content .

De hecho, si un elemento tiene márgenes automáticos aplicados, las propiedades de alineación de palabras clave como justify-content y align-self no tienen ningún efecto (porque los márgenes automáticos han tomado todo el espacio).

Su código funciona como se esperaba en Chrome y Firefox porque esos navegadores cumplen con las especificaciones.

IE10 e IE11 parecen no estar en conformidad. No están aplicando el margen automático como se define en la especificación.

(Tenga en cuenta que IE10 se basa en una versión anterior de la especificación ).


Soluciones

Método n. ° 1: usar solo márgenes automáticos

Si justify-content se elimina, los márgenes automáticos funcionan bien en IE10 / 11. Entonces no use justify-content . Use márgenes automáticos todo el tiempo. ( Vea ejemplos de alineación con márgenes automáticos ).

Método n. ° 2: use un separador invisible div

Cree un tercer div con visibility: hidden y flex-grow:1 . Esto cambiará naturalmente #first-item y #second-item al borde izquierdo, sin necesidad de márgenes automáticos.

 #container { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; } #third-item { flex-grow: 1; visibility: hidden; } /* just some colors - not important */ #container { height: 200px; width: 100%; background: pink; } #container > div { background: cornflowerblue; padding: 10px; outline: 1px solid yellow; } 
 
first item
second item
third item