Элементы переполнения элементов Flex в IE11

Мой контейнер flex имеет горизонтальный список элементов, которые все браузеры отображаются правильно внутри своего родителя, за исключением IE11, которые, похоже, неспособны сохранить их внутри, вместо этого они "выливаются" из него, например:

Ниже приведен упрощенный Fiddle моей установки, который демонстрирует проблему в действии:

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>

Ответ 1

Похоже, IE11 требует, чтобы вы определяли размер элементов flex (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>

Ответ 2

Я не уверен, это правильный подход или нет, но вы можете попробовать этот хак, он работает

вы также можете попробовать это, используя modernizr для таргетинга IE браузеров

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>

Ответ 3

Как уже упоминалось, IE11 хочет, чтобы элементы гибких элементов имели ширину. Ваша разметка показывает, что вы пытаетесь установить высоту и ширину изображения. Вы можете снять эти атрибуты высоты и ширины на изображении, а затем просто установите для своего изображения значение width: 100%. Это позволит каждому изображению занимать пространство его родителя и все еще масштабироваться в зависимости от количества в контейнере.

В качестве альтернативы, если вы не хотите, чтобы эти изображения стали больше, вы можете установить max-width на 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>