flexbox内の画像にmax-widthを指定した際にIEで崩れる

flexbox内の画像にmax-widthを指定した時に、実際の画像サイズが指定サイズより大きいとIEではみ出してしまうことがあったので対応方法をメモ。

サンプルコード

まずは上手くいかなかった例です。

<div class="wrapper">
	<div class="item">
		<img src="https://via.placeholder.com/800x600" alt="">
	</div>
	<div class="item">
		<img src="https://via.placeholder.com/800x400" alt="">
	</div>
</div>

.item内の画像はCMSからの出力で、場合によってサイズが変動する想定です。
.wrapperに対してflexboxを設定、その子要素の.itemにはmax-widthを指定して、内部の画像に合わせてサイズが変わるようにします。

img {
	max-width: 100%;
	height: auto;
}
.wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 820px;
	margin: auto;
}
.item {
	max-width: 400px;
}
.item:not(:first-child) {
	margin-left: 20px;
}

これで基本的には意図した表示にできたのですが、IEのみ画像がはみ出してしまいました。
IEでうまくいかなかった場合のデモページ

flexbox内の画像に指定するmax-widthがIEで効かないようなので、widthで固定値を指定すれば解消されました。

img {
	max-width: 100%;
	height: auto;
}
.wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 820px;
	margin: auto;
}
.item {
	max-width: 400px;
}
.item:not(:first-child) {
	margin-left: 20px;
}
.item img {
	width: 400px;
}

画像幅に固定値を指定するデモページ
画像幅が決まっている場合はこの対応で問題ないですが、今回は画像サイズが可変のため、画像サイズによっては意図しない表示になってしまいます。

色々と試してみましたが、CSSでの調整は難しそうだったので、最終的にはJavaScriptで必要に応じて画像に幅を指定するようにしました。

window.onload = function() {
	flexbox_img_adjust();
};
window.onresize = function() {
	flexbox_img_adjust();
};

// flexbox内の画像サイズの調整
function flexbox_img_adjust() {
	var items = document.querySelectorAll('.item');
	for (var i = 0; i < items.length; i++) {
		var img = items[i].querySelector('img');
		// .itemの最大幅を親要素から計算で算出
		var itemWidth = (items[i].parentNode.clientWidth - 20) / 2; // (親要素の幅 - 要素間のマージン) / 要素数
		// 画像の元サイズを取得
		var imgWidth = img.naturalWidth;
		// .itemの最大幅とimgの実際の幅を比較
		console.log(imgWidth, itemWidth);
		if(imgWidth > itemWidth) {
			// 画像の方が大きい場合はwidthを設定してはみ出ないようにする
			img.width = itemWidth;
		}
	}
}

14行目の.itemの幅の計算は場合によって調整が必要になります。

これでIEでも意図した表示にすることができました。
JavaScriptで画像サイズを設定するデモページ
(表示確認用にHTMLのパターンを追加しています。)