flexbox下FF和IE11中的max-height和max-width意外行为

Question

我的父母有flexbox，并且该元素中的图片包含max-height和max-width。这在Chrome（ofc）中显示正常，但在Firefox上，图片显示为height:100%和width:100%，而在IE中，width显示的图片超过100%。

我在codepen上创建了一个示例。

HTML：

<div id='flex'>
  <img src='https://www.google.se/images/srpr/logo11w.png' />
</div>

CSS：

#flex {
  align-items: center;
  -webkit-align-items: center;    
  -ms-flex-align: center;
  display:block;
  display: -webkit-flex;    
  display: -ms-flexbox;
  display: flex;
  width:200px;
  height:200px;
}

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

如何使用max-height和max-width“正常”（display:block;上的#flex）显示图像？我需要display:flex所以我可以在中心（垂直）显示图像。如果您在codepen上将display更改为block，您将会看到图片的外观。

在Chrome中看起来如何（正确）：

在Firefox中看起来如何：

在IE11中看起来如何：

Answer 1

如果您不介意添加一些标记，请将图像包含在另一个容器中，该容器可以从而不是Flex容器获得其父高度和宽度。这应该可以解决Firefox中的问题，但我无法在Internet Explorer 11中测试它。您可能必须为新容器添加额外的宽度/高度样式，以便它可以在所有浏览器中使用。

Answer 2

遗憾的是，我找不到任何解决方案，所以我不得不使用display:table / display:table-cell和vertical-align:middle代替。

Codepen提供的工作副本。

标记

<div id='flex'>
  <div>
     <div>
        <img src='https://www.google.se/images/srpr/logo11w.png' />
    </div>
  </div>
</div>

CSS

#flex {
  display:table;
  background:purple;
  width:200px;
  height:200px;
}

#flex > div { 
  display:table-cell;
  height: inherit; 
  vertical-align: middle;
  width:inherit; 
}
#flex > div > div {
  width:inherit;
}

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