css3 - propiedades - columnas flexbox y IE

propiedades flex box css

Question

Todo funciona bien en Chrome y Firefox, pero adivinen qué, ¡tengo un problema en IE! (IE11)

En mi diseño receptivo, quiero que el menú sea horizontal en modo PC y vertical en modo tableta / móvil. Hace exactamente eso, pero en IE los elementos del menú no tienen altura. Todos colapsan a 0 altura si se inspeccionan con la herramienta de desarrollo. No puedo encontrar por qué.

¿Alguien tendría una idea?

Hice un código para ello: http://codepen.io/Reblutus/pen/qjacv

Aquí está el código

<style>
header { background: cyan;}
nav { background: bisque;}
.main-a { background: tomato;}
.main-b { background: lightblue;}
footer { background: lightpink;}
.headerContainer nav {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column nowrap;
flex-direction: column;
}
.headerContainer nav > a {
padding: 5px 10px;
text-align: center;
background: #fcd113;
border: #6eac2c solid 1px;
border-width: 0 0 1px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
@media all and (min-width: 600px) {
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-direction: row;
}
.wrapper > .headerContainer {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.wrapper > .mainContainer {
-webkit-box-flex: 2;
-moz-box-flex: 2;
-webkit-flex: 2;
-ms-flex: 2;
flex: 2;
}
.mainContainer {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-direction: row;
}
.mainContainer .main-a {
-webkit-box-flex: 2;
-moz-box-flex: 2;
-webkit-flex: 2;
-ms-flex: 2;
flex: 2;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.mainContainer .main-b {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
}
@media all and (min-width: 800px) {
.wrapper {
display: block;
}
.headerContainer {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-direction: row;
}
.headerContainer header {
-webkit-box-flex: 1 200px;
-moz-box-flex: 1 200px;
-webkit-flex: 1 200px;
-ms-flex: 1 200px;
flex: 1 200px;
}
.headerContainer nav {
-webkit-box-flex: 1 100%;
-moz-box-flex: 1 100%;
-webkit-flex: 1 100%;
-ms-flex: 1 100%;
flex: 1 100%;
-webkit-flex-flow: row nowrap;
flex-direction: row;
}
}
</style>
<div class="wrapper">
<div class="headerContainer">
<header>Logo <i class="fa fa-camera-retro"></i> </header>
<nav>
<a href="javascript:;">Home</a>
<a href="javascript:;">About Us</a>
<a href="javascript:;">Our Properties</a>
<a href="javascript:;">Clients & Partners</a>
</nav>
</div>
<div class="mainContainer">
<div class="main main-a">Main content A</div>
<div class="main main-b">Main content B</div> </div>
</div>
<footer>footer</footer>

Answer 1

Al eliminar los elementos flex en .headerContainer nav > a soluciona el problema. Probado en IE11 y Chrome.

... aunque eso rompe los diseños más amplios, por lo que tendrá que volver a colocarlos para una consulta de medios de 800px.

Answer 2

Tuve un problema muy similar con IE11.

Al parecer, el problema está relacionado con la implementación de IE de la propiedad flex .

En IE10, el valor predeterminado para flex es 0 0 auto en lugar de 0 1 auto como se define en la última especificación.

Fuente: http://caniuse.com/#feat=flexbox

El establecimiento explícito de la propiedad flex en 1 0 auto solucionó 1 0 auto el problema en mi caso.

Entonces, en cualquier lugar que tenga el conjunto de propiedades flex, actualice los valores para que coincidan con este formato explícito.