Flex项目超过IE中父项的宽度

Question

我有一个ul > li > a > img括号,并使用flexbox将所有列表项对齐到一行,而图像保持其宽高比.

Chrome 45,Firefox 40,Safari 8,Opera 28和Edge的外观如何

它在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,适合想要更详细外观的人.

Answer 1

不确定这是否是您想要解决问题的方式，但我已经添加了

li{
  height: 100%
}

和其他一些事情，它似乎在这里工作：

编辑：更新了演示，现在 Chrome 和 IE 的比例似乎很好

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