css - フレックスボックスの下の 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%;
}

「通常」( on )で画像max-heightを表示するにはどうすればよいですか? 画像を中央（垂直）に表示できるようにする必要があります。on codepenに変更すると、画像がどのように見えるかがわかります。max-widthdisplay:block;#flexdisplay:flexdisplayblock

Chrome での表示 (正しい):

Firefox では次のように表示されます。

IE11 での表示:

Answer 1

マークアップを追加しても構わない場合は、フレックス コンテナーの代わりに親の高さと幅を取得できる別のコンテナー内に画像を囲みます。これで Firefox の問題は解決するはずですが、Internet Explorer 11 ではテストできません。すべてのブラウザーで動作させるには、新しいコンテナーに幅/高さのスタイルを追加する必要がある場合があります。

Answer 2

残念ながら、これに対する解決策が見つからなかったため、代わりにdisplay:table/ display:table-cellandを使用する必要がありました。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%;
}