Flexbugs: IE11: un solo elemento flexible con margen automático se cambia al extremo flexible

Interesante, parece que intenta aplicar el margen _ además_ a la justificación del padre.

Probablemente sea una buena práctica en general usar el margen para centrar o usar las propiedades principales justify-content y align-items , pero no ambas.

Encontré un problema similar y también tuve que evitar margin: auto . Estoy de acuerdo con la solución alternativa / mejor práctica para evitar el uso de margin: auto junto con justify-content para todos los escenarios.

Me gustaría agregar a la discusión anterior: margin: auto en IE es muy poco confiable. Pueden ocurrir problemas incluso si hay más de un elemento presente e incluso si se utilizan valores no centrales para justify-content .
Este problema también está presente en UC Browser.

Aquí hay una demostración con 3 elementos y con justify-content: flex-end - https://jsfiddle.net/csz3uuuh/5/
(Los elementos 2 y 3 se cambian fuera de la caja en IE).

En mi caso, estaba tratando de alinear el segundo contenido en la parte inferior y el primer contenido en el centro del espacio restante usando margin:auto . Tuve que solucionarlo eliminando los márgenes automáticos y calculando los valores de los márgenes usando calc .

Pasé un poco de tiempo en esto, ya que no estaba en la página de inicio, y estaré encantado de enviar la documentación para esto. Hágame saber qué se debe hacer.

También me encontré con este problema hoy. Pude apuntar solo a IE con una consulta de medios para que el problema no interfiera con otros estilos aplicados a otros navegadores.
<strong i="6">@media</strong> screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { // your code }