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

<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 se ajusta :

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

¿Hay alguna 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 hijo 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: 1tambié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 */
}

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

Nota: A veces será necesario clasificar los distintos niveles de la estructura HTML para determinar qué contenedor obtiene el width: 100%. El texto de ajuste CSS no funciona en IE

Tuve el mismo problema y el punto 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 trabajar (trabajó para mí). Utilizandoalign-self: stretch solo funciona si no estás usando align-items: center(lo cual hice). width: 100%solo funciona si no tiene varios hijos dentro de su flexbox que desea mostrar uno al lado del otro.

Hola, tuve que aplicar el ancho del 100% a su elemento abuelo. No es su elemento (s) 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;
}

De alguna manera, todas estas soluciones no funcionaron para mí. Claramente hay un error de IE en flex-direction:column.

Solo lo hice funcionar después de eliminar flex-direction:

flex-wrap: wrap;
align-items: center;
align-content: center;

Las soluciones propuestas no me ayudaron con ".child {width: 100%;}", ya que tenía un marcado más complicado. Sin embargo, encontré una solución: eliminar "align-items: center;", y también funciona para este caso.

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

La única forma en que he podido evitar el 100% de este error de columna de dirección flexible consiste en utilizar una consulta de medios de ancho mínimo para asignar un ancho máximo al elemento secundario en pantallas de tamaño de escritorio.

.parent {
    display: flex;
    flex-direction: column;
}

//a media query targeting desktop sort of sized screens
@media screen and (min-width: 980px) {
    .child {
        display: block;
        max-width: 500px;//maximimum width of the element on a desktop sized screen
    }
}

Deberá establecer elementos secundarios en línea de forma natural (p. Ej. <span>O <a>) en algo distinto de en línea (principalmente display: block o display: inline-block) para que la corrección funcione.

No encontré mi solución aquí, tal vez alguien sea útil:

.child-with-overflowed-text{
  word-wrap: break-all;
}

¡Buena suerte!

.grandparent{
   display: table;
}

.parent{
  display: table-cell
  vertical-align: middle
}

Esto funcionó para mí.

Yo también me encontré con este problema.

La única alternativa es definir un ancho (o ancho máximo) en los elementos secundarios. IE 11 es un poco estúpido, y yo solo pasé 20 minutos para darme cuenta de esta solución.

.parent {
  display: flex;
  flex-direction: column;
  width: 800px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  max-width: 800px;
  @media (max-width:960px){ // <--- Here we go. The text won't wrap ? we will make it break !
    max-width: 600px;
  }
  @media (max-width:600px){
    max-width: 400px;
  }
  @media (max-width:400px){
    max-width: 150px;
  }
}

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

Tuve un problema similar con el desbordamiento de imágenes en un contenedor flexible.

Agregar flex-basis: 100%;o flex: 1;al niño desbordado fijo funcionó para mí.

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

.child {
  white-space: normal;
}