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

Question

我flexbox在该元素中有一个父级和一个图像，其中max-height和max-width。这在 Chrome (ofc) 中显示良好，但在 Firefox 上显示图像height:100%，width:100%而在 IE 中显示为widthover 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;on #flex）显示图像？我需要display:flex这样才能在中心（垂直）显示图像。如果您更改display为blockon codepen，您将看到图像的外观。

它在 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%;
}