Flexbox e Internet Explorer 11 (pantalla: flex en <html>?)

117

Estoy planeando alejarme de los diseños "flotantes" y usar CSS flexbox para proyectos futuros. Me encantó ver que todos los principales navegadores en sus versiones actuales parecen admitir (de una forma u otra) flexbox.

Me dirigí a "Resuelto por Flexbox" para ver algunos ejemplos. Sin embargo, el ejemplo de "Sticky Footer" no parece funcionar en Internet Explorer 11. Jugué un poco y logré que funcionara agregando display:flexal <html>y width:100%al<body>

Entonces mi primera pregunta es: ¿Alguien puede explicarme esa lógica? Simplemente jugueteé y funcionó, pero no entiendo por qué funcionó de esa manera ...

Luego está el ejemplo de "Objeto multimedia" que funciona en todos los navegadores excepto, lo adivinó, Internet Explorer. Yo también jugueteé con eso, pero sin éxito.

Por tanto, mi segunda pregunta es: ¿Existe una posibilidad "limpia" de que el ejemplo de "Objeto multimedia" funcione en Internet Explorer?

html css flexbox cross-browser Kodekan
fuente
1
Solo una actualización de esta vieja pregunta: la demostración vinculada funciona bien en IE11. Debe haber sido un error corregido en los 3 años desde que se solicitó.
Daryl

Respuestas:

151

Según http://caniuse.com/#feat=flexbox :

"Los valores predeterminados de IE10 e IE11 para flexson en 0 0 autolugar de 0 1 auto, según la especificación preliminar, a septiembre de 2013"

Entonces, en palabras simples, si en algún lugar de su CSS tiene algo como esto:, flex:1eso no se traduce de la misma manera en todos los navegadores. Intente cambiarlo a 1 0 0y creo que verá inmediatamente que -kinda- funciona.

El problema es que esta solución probablemente arruinará Firefox, pero luego puedes usar algunos trucos para apuntar solo a Mozilla y volver a cambiarlo:

@-moz-document url-prefix() {
 #flexible-content{
      flex: 1;
    }
}

Dado que flexboxes un candidato del W3C y no es oficial, los navegadores tienden a dar resultados diferentes, pero supongo que eso cambiará en el futuro inmediato.

¡Si alguien tiene una mejor respuesta, me gustaría saber!

Odisseas
fuente
1
Creo que eso significa que IE10 necesita -ms-flex: 1 0 0;e IE11 flex: 1 0 0;..?
Eystein
19
Con Google Chrome 39, esto de repente dejó de funcionar para mí. Me tomó años localizarlo, pero era la especificación del tercer dígito. Chrome 39 no se adhiere flex: 1 0 0;. Pero flex: 1 0 0%;( tenga en cuenta el % ) o flex: 1 0 auto;funcionará.
Eystein
Sí, es cierto, ¡también rompió algunos de mis diseños! Lo arreglé simplemente cambiándolo a flex: 1;Supongo que depende de lo que estés buscando, aunque ...
Odisseas
1
El problema principal con IE11 es la forma en que se calcula flex-basis. Github tiene una buena discusión sobre por qué flex:1 0 100%funciona en algunos casos para IE11 flex: 1 0 0%o incluso flex: 1 0 autofunciona en otros. Tienes que conocer el contenido de antemano.
P.Brian.Mackey
De caniuse.com/#feat=flexbox , se menciona específicamente en problemas conocidos que IE 11 requiere que se agregue una unidad al tercer argumento, la propiedad de base flexible ..
Henry Neo
49

Use otro contenedor flexible para solucionar el min-heightproblema en IE10 e IE11:

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

CSS

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

Vea una demostración funcional .

  • No use el diseño de flexbox directamente bodyporque estropea los elementos insertados a través de los complementos de jQuery (autocompletar, emergente, etc.).
  • No use height:100%o height:100vhen su contenedor porque el pie de página se pegará en la parte inferior de la ventana y no se adaptará al contenido extenso.
  • Utilice en flex-grow:1lugar de flex:1causar los valores predeterminados de IE10 e IE11 para flexson 0 0 autoy no 0 1 auto.
BeliG
fuente
3
Me encontré con que tenía que añadir flex-direction: columna .ie-fixMinHeightevitar los efectos secundarios. Si no tiene HTML específico de IE, puede usar.fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }
Mark Horgan
Sé que tiene 2 años, ¡pero gracias! Estaba siguiendo este stackoverflow.com/a/24979148/359157 y luché por siempre tratando de descubrir por qué IE fue destruido mientras Edge y Chrome funcionaban perfectamente. El heightvs min-heightfue la clave.
TyCobb
39

Solo necesitas flex:1; Solucionará el problema del IE11. Yo segundo Odisseas. Además, asigne 100% de altura a html, elementos del cuerpo .

Cambios de CSS:

html, body{
    height:100%;
}
body {
    border: red 1px solid;
    min-height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
header {
    background: #23bcfc;
}
main {
    background: #87ccfc;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
footer {
    background: #dd55dd;
}

URL de trabajo: http://jsfiddle.net/3tpuryso/13/

Ashok Kumar Gupta
fuente
¿Podría explicar más sobre este problema? ¿Existe una posibilidad "limpia" de que el ejemplo de "Objeto multimedia" funcione en IE?
Ashok Kumar Gupta
1
Esto funciona para mi. Una cosa que encontré (porque me atrapó) es que si tiene un elemento contenedor, los display: flex;estilos y asociados deben aplicarse tanto al bodycontenedor como al: jsfiddle.net/Skateside/nezdrrkr
James Long
Establecer la altura de html al 100% parece hacer que el contenido de maindeje de crecer correctamente (en cromo, al menos); si agrega suficiente contenido, invadirá el pie de página. jsfiddle.net/3tpuryso/65
FoolishSeth
@FoolishSeth tal como está ahora, básicamente le está diciendo que crezca al 100% y ni un píxel más. En su lugar, debe configurar el htmlpara min-height: 100%seguir su contenido
Odisseas
¡Gracias! La parte que me faltaba no era en realidad ninguno de los atributos de flex, sino la altura: 100% en el elemento contenedor (que para mí era un div .pusher porque mi sitio incluye una barra lateral receptiva).
zanther
0

Aquí hay un ejemplo del uso de flex que también funciona en Internet Explorer 11 y Chrome.

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Flex Test</title>
<style>
html, body {
    margin: 0px;
    padding: 0px;
    height: 100vh;
}
.main {
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
}

.main::after {
  content: '';
  height: 100vh;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  float: left;
}

.left {
    width: 200px;
    background: #F0F0F0;
    flex-shrink: 0;
}

.right {
    flex-grow: 1;
    background: yellow;
}
</style>
</head>

<body>
<div class="main">
    <div class="left">
        <div style="height: 300px;">
        </div>
    </div>

    <div class="right">
        <div style="height: 1000px;">
            test test test
        </div>
    </div>
</div>
</body>
</html>
Expandir fragmento

BadTree Lu
fuente
15
Proporcione información adicional, en lugar de simplemente pegar su Html.
Peter
7
Si bien esta respuesta probablemente sea correcta y útil, se prefiere si incluye alguna explicación junto con ella para explicar cómo ayuda a resolver el problema. Esto se vuelve especialmente útil en el futuro, si hay un cambio (posiblemente no relacionado) que haga que deje de funcionar y los usuarios deben comprender cómo funcionaba antes.
Erty Seidohl
0

A veces es tan simple como agregar: '-ms-' delante del estilo Like -ms-flex-flow: row wrap; para que funcione también.

Marsel Grey
fuente
3
A veces, pero la mayoría de las veces no;)
Descarguemos