El texto en un contenedor flexible no se ajusta en IE11


176

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:

ingrese la descripción de la imagen aquí

Pero, en IE11, el texto no se ajusta :

ingrese la descripción de la imagen aquí

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



1
El problema desaparece cuando elimino align-items: centerdel elemento padre. Eso parece ser lo que lo está causando
Nathan Perrier

Respuestas:


280

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.

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


13
Tuve que agregar ancho: 100%; a los padres Este error parece tener varias correcciones según el contexto. Suspiro IE!
Dennis Johnsen

8
En su lugar, use "max-width: 100%" en el .child.
Tyler

2
Estoy creando una tabla usando flex (cada fila es un flex, con sus hijos teniendo:. flex: 1 1 50%; display: flex; align-items: center;No es sorprendente que IE falle mientras ajusta textos largos en las celdas. ¡La configuración width:100%funciona, pero la configuración min-width: 100%no! Debería, pero no funciona) t (como todas las cosas IE), así que probé max-width: 99%, y sorprendentemente, que hace el trabajo Creo usando. width:100%podría ser mejor?
kumarharsh

1
Tuve que eliminar flex-direction: columna los padres para que esto funcione.
dman

1
Este problema parece exclusivo de las columnas flexibles. No sucede con filas flexibles.
Drazen Bjelovuk

40

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


2
Sí, esta respuesta también tiene sentido (y probablemente sea más correcta que la de ancho). En uno de mis diseños, establecer el ancho: 100% no es posible, y esta solución funciona bien.
kumarharsh

11

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.


max-width funcionó para mí cuando se aplicó al mismo contenedor que alinea elementos: se colocó flex-start.
Herms

7

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

Tenía "ancho: auto;" en abuelo. Cambiar a 100% solucionó esto para mí.
jensanity5000

2

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;

0

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>


No es necesario eliminar align-items: center. Ver stackoverflow.com/a/39365207/630170
kumarharsh

0

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.


0

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

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

¡Buena suerte!


0
.grandparent{
   display: table;
}

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

Esto funcionó para mí.


0

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>

-1

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


Esta solución ya se dio hace años, y solo necesitamos una, así que evite publicar respuestas duplicadas.
Ason

-4

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

.child {
  white-space: normal;
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.