Элементы Flex превышают ширину родительского элемента в IE

У меня есть скобка ul > li > a > img, и я использую flexbox для выравнивания всех элементов списка до одной строки, в то время как изображения поддерживают их соотношение сторон.

Как выглядит в Chrome 45, Firefox 40, Safari 8, Opera 28 и Край

Как выглядит в IE 10/11

Итак, моя проблема в том, что я пытаюсь добиться в IE того же поведения, что и в Chrome и Firefox.

Мой SASS/SCSS

ul.images {
  float: left;
  clear: both;
  width: 100%;
  min-height: auto; // Required for Firefox
  padding: 0;
  margin: 0;
  border: 1px solid yellow;

  display: -webkit-flex;
  -webkit-flex-direction: row;

  display: -ms-flexbox;
  -ms-flex-direction: row;

  display: flex;
  flex-direction: row;

  li {
    border: 2px solid green;
    flex: 1 1 auto;
    width: auto;
    min-width: 0; // Required by Firefox
    max-width: 100%;
    max-height: auto;

    img {
      float: left; // Removes phantom margin
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: 100px;
    }
  }
}

Здесь CodePen для тех, кто хочет более подробного просмотра.

Ответ 1

Измените ширину <img> с авто до 100%

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100px;
}

Кажется, что Chrome, который не уважает стандартные

Ответ 2

Не уверен, что так вы хотите, чтобы проблема была решена, но я добавил в

li{
  height: 100%
}

и несколько других вещей, и, похоже, он работает здесь:

EDIT: обновлено демо, соотношение, похоже, сейчас отлично подходит для Chrome и IE

http://jsfiddle.net/uf30wuwz/3/

Ответ 3

У меня такая же проблема, и я нашел это исправление, просто добавьте это в свою таблицу стилей:

*{
min-height: 0;
min-width: 0;
}

Ответ 4

Самое простое решение: добавить "переполнение: скрытый" в класс .images '

В комментариях:

Правда, ребята, пропустили этот, извините. @mathijs, технически верно, но CSS полон хаков (должно быть). Рассмотрим, например, файл clearfix hack, который, как представляется, теперь доступен для общения.

Но в этом случае, когда основной контейнер имеет максимальную ширину 500 пикселей, скрытие переполнения кажется лучшим выбором, когда сумма ширины масштабированного изображения не помещается в контейнер изображения. Это немного или/или ситуация.

BTW: Chrome менее близок к спецификациям W3C, чем FF (DE 42+), я бы предпочел начать использовать FF для вашего первоначального тестирования, а затем проверить его в Ch, чтобы обнаружить причуды. Я уверен, что Ch скрывает переполнение внутри.

@Matt, я придерживаюсь "переполнения: скрытое" решение, в более крупном проекте это довольно тривиально и выполняет эту работу.

Мне было интересно, вам действительно нужно ul/li? С немного перерисовывая код, он становится менее сложным и сжатым, посмотрите:

@Matt снова: по-видимому, Ch сокращает избыточные данные элемента, когда их контейнер имеет фиксированную ширину, как и ваш, тогда как FF и IE ожидают, что вы скажете им, что с ним делать (W3C). Я изменил класс 'rew-images' из 'overflow: hidden' в 'overflow-x: scroll; overflow-y: hidden ', теперь вы можете понять, почему вам нужно что-то делать с переполнением.

Источником вашей проблемы является то, что вы хотите, чтобы изображения, хорошо выровненные И, имели правильный коэффициент масштабирования (как и я). Но сумма полученных изображений ширины больше 500px (минус поля и т.д.), Поэтому класс "изображения" переполняется. Вы просто не можете поместить 600px в контейнер размером 500px и поддерживать соотношение сторон. Вам нужно будет сделать некоторую резку или удалить ограничение ширины основного контейнера (удалить ширину: 500 пикселей). Как я сказал ранее: либо/или...

.rew-container {
  float: left;
  width: 500px;
  border: 2px solid black;
  padding: 15px
}
.rew-images {
  display: flex;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 1px solid red;
  overflow-x: scroll; overflow-y: hidden
}
.rew-images img {
  min-width: 100%;
  max-width: 100%;
  width: auto;
  max-height: 100px
}
.rew-images a {
  flex: 1 1;
  border: 2px solid green;
  max-height: 100px;
}

<div class="rew-container">
  <div class="rew-images">
    <a href="#" onclick="location.href='http://4.bp.blogspot.com/-q8j1nkqwHnE/Tsbs1isbCTI/AAAAAAAAAG4/mcWdJwJ5uvE/s1600/armin_van_buuren_%25282%2529_798.jpg'; return false;" title="armin_van_buuren_%282%29_798.jpg">
      <img src="https://tse4.mm.bing.net/th?id=JN.d1jQ4iuFK0%2b4AkstmpzD1A&amp;pid=15.1" alt="armin_van_buuren_%282%29_798.jpg" height="168" width="300">
    </a>
    <a href="#" onclick="location.href='http://thegun2oo5.files.wordpress.com/2010/05/1140_armin_van_buuren.jpg'; return false;" title="Armin van Buuren – the best Dj’ in the world :X:X:X">
      <img src="https://tse3.mm.bing.net/th?id=JN.RTJ8eeB%2bIMptSFcLhGpXQw&amp;pid=15.1" alt="" height="480" width="444">
    </a>
    <a href="#" onclick="location.href='http://thexipiron.files.wordpress.com/2012/01/armin-van-buuren.jpg'; return false;" title="armin van buuren">
      <img src="https://tse2.mm.bing.net/th?id=JN.VkPvTXw%2fPEOMmOcl9smvoQ&amp;pid=15.1" alt="armin van buuren" height="360" width="480">
    </a>
    <a href="#" onclick="location.href='http://fondosdedj.com/wp-content/uploads/images/74/armin-van-buuren.jpg'; return false;" title="Nos encanta la música de Armin van Buuren, y lo queremos demostrar ...">
      <img src="https://tse2.mm.bing.net/th?id=JN.SvQClhGAAGcPYl1U2SZQsA&amp;pid=15.1" alt="Nos encanta la música de Armin van Buuren, y lo queremos demostrar ..." height="315" width="480">
    </a>
  </div>
</div>