Me pregunto si alguien puede ayudar con este problema. Pasé mucho tiempo en ello y no tengo ideas, probé varias sugerencias de los resultados de Google, varias combinaciones de flexión y crecimiento, y no pude hacerlo funcionar.

Manifestación: https://embed.plnkr.co/dIPh53W4DBkmTB51DCHp/ (abrir con IE 11)

Edite el código: https://plnkr.co/edit/dIPh53W4DBkmTB51DCHp?p=preview

En este caso, en la vista de tableta, el<ul> el ancho de flexión debe ser del 90%, pero en la vista de escritorio el<ul> El ancho de flexión solo debe ser del 55%. Sin embargo, no queremos el<ul> en la vista de escritorio para que sea más corta que en la vista de tableta, por lo que configuramos unmin-width: 864px en<ul> para la vista de escritorio Entonces, si cambia el tamaño de la pantalla entre 950 px y 970 px, el<ul> ya no debería encogerse de repente.

Esto parece funcionar bien en todos los Chrome, Firefox, Safari e IE10.

Pero en IE11, el elemento tiene el ancho incorrecto y no se centrará como se esperaba. Creo que es porque en la dimensión del navegador de 960 px, el 55% seríamax-width: 528px sobre el<ul> elemento, pero también tienemin-width: 864px. Por alguna razón, IE11 representa esto como colocado a la izquierda (en lugar del centro), con un ancho de 528 px. Entonces IE11 parece ignorar la propiedad de ancho mínimo, no lo maneja como los otros navegadores.

Ejemplo de código:

index.html:

<div class="progress-bar">
  <ul>
    <li>Test item</li>
    <li>Test item</li>
    <li>Test item</li>
    <li>Test item</li>
  </ul>
</div>

style.css:

div {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

ul {
  display: flex;
  flex: 1 1 90%;
  max-width: 90%;

  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  display: flex;
  flex: 1 1 0%;
  justify-content: center;

  margin: 0;
  padding: 12px 0;
  list-style-type: none;
  background: #f7f7f7;
}

@media (min-width: 960px) {
  ul {
    min-width: 864px !important;
    flex-basis: 55%;
    max-width: 55%;
  }
}

IE 10 realmente funciona bien en este caso, por lo que parece que la versión de IE 11 podría haber roto algo que ya estaba funcionando.

¿Alguna idea de cómo se puede resolver esto?