Flex-direction de la colonne de flex éléments se chevauchent IE11

Je suis en cours d'exécution dans un problème à l'aide de flexbox dans IE11. Lors de l'utilisation de flex-direction: column le flex-éléments se chevauchent:

Flex-direction de la colonne de flex éléments se chevauchent IE11

Dans d'autres navigateurs (chrome, safari), il ressemble à ceci:

Flex-direction de la colonne de flex éléments se chevauchent IE11

C'est le css:

.container {
  display: flex; 
  flex-direction: column;
}

.flex {
  flex: 1 1 0%;
}

Et c'est le html:

<div class="container">
  <div class="flex">
    Hello
  </div>
  <div class="flex">
    World
  </div>
</div>

J'ai fait un codepen pour illustrer le problème:

http://codepen.io/csteur/pen/XMgpad

Ce qui me manque pour faire de cette disposition se chevauchent pas dans IE11?

InformationsquelleAutor Chantal Steur | 2017-03-13
  1. 25

    Elle est causée par %0 classe

    .flex {
  flex: 1 1 auto;
}

    changer en auto alors qu'il ne devrait pas être un problème

    • Ce qui est source de confusion à propos de cette réponse est que SI le lecteur est utilisé pour voir la réponse dans le "code de style de bloc", mais ici, ce bloc contient le mauvais code, et la solution pour elle en quelque sorte "cachée" dans le texte en dessous.
    • Vous avez obtenu un point. il fixe. Merci pour le feedback
    InformationsquelleAutor necilAlbayrak
  2. 14

    Au lieu de flex: 1 1 0%; utilisation flex: 1 1 auto;

    CSS:

    .container {
  display: flex; 
  flex-direction: column;
}

.flex {
  flex: 1 1 auto;
}

    HTML:

    <div class="container">
  <div class="flex">
    Hello
  </div>
  <div class="flex">
    World
  </div>
</div>

    InformationsquelleAutor 3rdthemagical
  3. 0

    eu le même problème avec IE11 et flex-direction: column-reverse
    J'ai changé d'utiliser le css order de la propriété au lieu de flex-direction.

    InformationsquelleAutor Adam
  4. 0

    Ma solution à ce problème était que j'avais besoin de définir explicitement la largeur de l'élément conteneur. Depuis flex est fixé à column IE11 va automatiquement augmenter la largeur du conteneur pour accueillir le contenu de l'enfants (rappelez-vous que le flex boîtes sont retournés sur leurs côtés dans column alignement de sorte que lorsqu'ils débordement ils se développent horizontalement au lieu de verticalement).

    Donc mon code devrait ressembler à:

    .container {
  display: flex; 
  flex-direction: column;
  width: 100%; //needs explicit width
}

.flex {
  flex: 1 1 auto; //or whatever
}
    InformationsquelleAutor kmgdev