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 agradecerá un consejo)
¿Existe alguna solución alternativa conocida?
Esta pregunta similar no tiene una respuesta definitiva ni un indicador oficial.
Añade esto a tu código:
.child { width: 100%; }
Sabemos que se supone que un hijo a nivel de bloque ocupa todo el ancho del padre.
Chrome entiende esto.
IE11, por cualquier motivo, quiere una solicitud explícita.
Usar flex-basis: 100%o flex: 1también funciona.
Mostrar fragmento de código
Nota: A veces será necesario ordenar los distintos niveles de la estructura HTML para identificar qué contenedor obtiene el archivo width: 100%. El texto ajustado CSS no funciona en IE
Tuve el mismo problema y el caso es que el elemento no adaptaba su ancho al contenedor.
En lugar de usar width:100%, sea coherente (no mezcle el modelo flotante y el modelo flexible) 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í, usar
max-width: 100%;
en el niño puede funcionar (funcionó para mí). Usar align-self: stretchsolo funciona si no lo 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.
