[css] El texto en un contenedor flexible no se ajusta en IE11



Answers

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í.

Question

Considere el siguiente fragmento:

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

En Chrome, el texto se ajusta como se esperaba:

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

¿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.




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;
 }



Related