web-dev-qa-db-fra.com

La colonne Flex-direction permet aux éléments flexibles de se chevaucher IE11

Je rencontre un problème d'utilisation de flexbox dans IE11. Lorsque vous utilisez flex-direction: column, les éléments flexibles se chevauchent:

 enter image description here

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

 enter image description here

C'est le css:

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

.flex {
  flex: 1 1 0%;
}

Et voici le code HTML:

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

J'ai créé un code pour illustrer le problème:

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

Qu'est-ce qui me manque pour que cette mise en page ne se chevauche pas dans IE11?

htmlcssinternet-explorerflexboxflex-direction
10
Chantal Steur

Il est causé par% 0 en classe.

.flex {
  flex: 1 1 auto;
}

changez-le en auto alors ça ne devrait pas être un problème

20
necilAlbayrak

Au lieu de flex: 1 1 0%;, utilisez flex: 1 1 auto;

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

.flex {
  flex: 1 1 auto;
}
<div class="container">
  <div class="flex">
    Hello
  </div>
  <div class="flex">
    World
  </div>
</div>

13
3rdthemagical

avait un problème similaire avec IE11 et flex-direction: column-reverse J'ai changé pour utiliser la propriété css order au lieu de flex-direction.

1
Adam

Ma solution particulière à ce problème était que je devais définir explicitement la largeur de l'élément conteneur. Étant donné que flex est défini sur column, IE11 étendra automatiquement la largeur du conteneur pour accueillir le contenu des enfants (rappelez-vous que les boîtes flexibles sont retournées sur leur côté dans l'alignement column de manière à ce qu'elles se développent horizontalement plutôt que verticalement).

Donc, mon code ressemblerait à ceci:

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

.flex {
  flex: 1 1 auto; // or whatever
}
0
kgrote