web-dev-qa-db-fra.com

Récipient débordant d'éléments flexibles dans IE11

Mon conteneur flex contient une liste horizontale d'éléments que tous les navigateurs affichent correctement dans leur parent, à l'exception de IE11, qui semble incapable de les conserver, mais au lieu de cela ils en "saignent", comme ceci:

 enter image description here

Ci-dessous se trouve un Fiddle simplifié de ma configuration qui montre le problème en action:

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
  width: 200px;
  border: 1px dashed red;
}

li img {
  max-width: 100%;
  height: auto;
}
<ul>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
</ul>

Résultat sur Chrome:  enter image description here

Résultat sur IE11:  enter image description here

Une solution de contournement?

csscss3internet-explorerflexbox
13
drake035

Il semble que IE11 nécessite que vous définissiez une taille pour les éléments flexibles (li):

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
  width: 200px;
  border: 1px dashed red;
}
 
li {              /* NEW */
  flex: 0 1 100%; /* flex-grow, flex-shrink, flex-basis */
  /* flex: 1 */   /* alternatively, this also works (short for: fg:1, fs:1, fb:0px) */
}

li img {
  max-width: 100%;
  height: auto;
}
<ul>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
</ul>

violon révisé

8
Michael_B

Comme cela a déjà été mentionné, IE11 souhaite que les éléments enfant flex aient une largeur définie. Votre balisage indique que vous essayez de définir une hauteur et une largeur sur l'image. Vous pouvez supprimer ces attributs de hauteur et de largeur dans l'image, puis définir simplement votre image sur width: 100%. Cela permettra à chaque image d’occuper l’espace de son parent et de redimensionner en fonction du nombre de celles-ci dans le conteneur. 

Sinon, si vous ne voulez pas que ces images s’agrandissent, vous pouvez définir un max-width sur la li

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
  width: 200px;
  border: 1px dashed red;
}
 
li {              

	flex-grow: 1;
	flex-shrink: 1;
 /* max-width: 50px; for keeping image from ever getting larger than certain point */
}

li img {
  width: 100%;
}
<ul>
  <li><img src="http://i.imgur.com/60PVLis.png"  alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png"  alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png"  alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png"  alt=""></li>
</ul>

0
paceaux

Je ne suis pas sûr, est la bonne approche ou non, mais vous pouvez essayer ce bidouillage, cela fonctionne

vous pouvez aussi essayer ceci en utilisant modernizr pour cibler IEbrowsers

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
  width: 200px;
  border: 1px dashed red;
}

_:-ms-fullscreen .ie-hack li,
:root .ie-hack li {
  display: flex;
}

li img {
  display: block;
  max-width: 100%;
  height: auto;
}
<ul class="ie-hack">
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
</ul>

0
Deepak Yadav