css - internet - IE11 flexbox prevenir el envoltorio de texto?

flex html5

Question

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.

IE11:

Borde:

Answer 1

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

Answer 2

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 */
}

Repositorio de errores Flexbox

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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 .

Answer 7

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.

Answer 8

Solo eliminar

align-items: flex-start

para #ContentNav . No hay ninguna razón para usarlo en flexbox con columnas.

Answer 9

Un poco tarde para la fiesta, pero estableciendo white-space: normal fue el truco para mí.