普段違うブラウザで確認している場合、見落としがちなバグです。
発生条件
- 大きい画像を縮小して表示させる
- 「横幅 or 高さ」のみを指定
- その画像要素がFlexboxの小要素である
他のブラウザだと横幅のみを指定した時も、縦横比が維持されて表示されます。 それがIE、Edgeだと縦横比が無視され、横幅は指定した値で高さは画像の本来の画像サイズで表示されます。
その結果、flexboxのボックスが異様に大きくなったり、ボックスからはみ出たりします。
対処方法
対処方法は以下のコードの通り。
img {
width: 120px;
flex-shrink: 0; //これを指定すると縦横比が維持される
}単純にflex-shrinkを指定してあげるだけで良い。高さを指定してしまうと、画面サイズによって横幅や高さを変えたい時に困るので注意してください。