css - internet - IE11 flexbox prevenir el envoltorio de texto?
flex html5 (9)
Estoy desarrollando un sitio que muestra OK en las últimas versiones de Firefox / SeaMonkey / Chrome, pero curiosamente en IE11 hay un problema de renderizado:
http://devel.gooeysoftware.com/mozaddons/switching.php
Si carga esto en IE11, el elemento de menú "Cambiar de Firefox a SeaMonkey" a la izquierda no obtiene su texto ajustado al tamaño del DIV que lo contiene, sino que se desborda. No puedo ver por qué es esto. ¿Es solo un error en IE11 o me falta algo de CSS para que se ajuste?
ACTUALIZAR:
Parece que arreglaron algunos de los bugs de renderizado IE11 de Edgebox.
¿Este bolígrafo ayuda? Esto es lo que encontré da mi una solución para ie11.
http://codepen.io/dukebranding/pen/vLQxGy
p {
/* Wrap the child text in a block tag, add the following styles */
display: flex;
width: 100%;
}
Encontré esta solución sencilla en el repositorio de errores de Flexbox:
/**
* Flexbug demo 2.1.b (workaround)
*
* 1. Set `max-width:100%` to prevent
* overflow.
* 2. Set `box-sizing:border-box` if
* needed to account for padding
* and border size.
*/
.FlexItem {
box-sizing: border-box; /* 2 */
max-width: 100%; /* 1 */
}
Encontré un problema similar y encontré con IE11 que necesitas usar la sintaxis:
flex: 1 1 auto;
más bien que:
flex: 1;
Gracias a este commit de Github: https://github.com/philipwalton/solved-by-flexbox/pull/8/files
Gracias a pyko, agregue la siguiente clase al padre de todo lo que no se comporte las reglas de desbordamiento habituales de flex:
.ie-dont-overflow {
-ms-overflow-x: hidden;
-ms-overflow-y: hidden;
}
No tengo idea de por qué esto funciona. IE apesta ...
Por lo que puedo decir, la implementación de flexbox de IE simplemente se ha roto. Esa es la respuesta larga y corta a esta pregunta. El texto debe ser envolvente, pero no lo es. Lo hace en Firefox y Chrome.
ACTUALIZAR:
La implementación de flexbox de IE11 se rompió. Esto ahora se renderiza correctamente en Edge.
Pude conseguir que el texto se ajustara correctamente en IE10 y 11 al establecer explícitamente un width o un width max-width en la display: flex elemento display: flex y el elemento secundario que debe tener su texto envuelto.
.flex-fix {
display: flex;
flex-wrap: wrap;
}
.flex-fix,
.flex-fix > * {
max-width: 100%;
}
Aquí hay una demo de Codepen .
Resolví este problema al agregar overflow: hidden al elemento flexible.
Pero esto también evita que todos los elementos secundarios se desborden, por lo que puede ser una mala solución si usa información sobre herramientas o elementos emergentes dentro de su elemento flexible.
Solo eliminar
align-items: flex-start
para #ContentNav . No hay ninguna razón para usarlo en flexbox con columnas.
Un poco tarde para la fiesta, pero estableciendo white-space: normal fue el truco para mí.