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.