El texto en un contenedor flexible no se ajusta en IE11

Considere el siguiente fragmento:

.parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry
Lorem Ipsum is simply dummy text of the printing and typesetting industry

En Chrome, el texto se ajusta como se esperaba:

enter image description here

Pero, en IE11, el texto no está envolviendo :

enter image description here

¿Es este un error conocido en IE? (En caso afirmativo, se apreciará un puntero)

¿Hay una solución conocida?


Esta pregunta similar no tiene una respuesta definitiva y un puntero oficial.

Agregue esto a su código:

 .child { width: 100%; } 

Sabemos que se supone que un niño de nivel de bloque ocupa todo el ancho del padre.

Chrome entiende esto.

IE11, por cualquier razón, quiere una solicitud explícita.

Usando flex-basis: 100% o flex: 1 también funciona.

 .parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; width: calc(100% - 2px); /* NEW; used calc to adjust for parent borders */ } 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry
Lorem Ipsum is simply dummy text of the printing and typesetting industry

Tuve el mismo problema y el hecho es que el elemento no estaba adaptando su ancho al contenedor.

En lugar de usar width:100% , sea ​​consistente (no mezcle el modelo flotante y el modelo flex) y use flex agregando esto:

 .child { align-self: stretch; } 

O:

 .parent { align-items: stretch; } 

Esto funcionó para mí.

Como Tyler ha sugerido en uno de los comentarios aquí, usando

 max-width: 100%; 

en el niño puede funcionar (funcionó para mí). Usar align-self: stretch solo funciona si no estás usando align-items: center (lo cual hice). width: 100% solo funciona si no tiene varios elementos secundarios dentro de su Flexbox que desea mostrar uno al lado del otro.

Hola, tuve que aplicar el ancho del 100% a su elemento de abuelo. No es su elemento hijo (s).

  .grandparent { float:left; clear: both; width:100%; //fix for IE11 text overflow } .parent { display: flex; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } 

¿Por qué utilizar una solución complicada si también funciona una simple?

 .child { white-space: normal; }