当サイト構築時に、CSSのcalcで3分割したところ、親要素が3で割り切れない、かつ複数行にわたる場合に3列目が折り返ししてしまいました。

実際、デモページを作っている際に、なる場合とならない場合があったので、なんとなく微妙ですが、その不具合？の回避方法についてご紹介します。

現象

IE11以外では、きちんと3列に分割されますが、IE11では3列目が下に折り返してしまいます。

修正前のデモを見る

※IE11でご覧ください。

HTML

<div class="calc_test">
	<p>ボックス1</p>
	<p>ボックス2</p>
	<p>ボックス3</p>
	<p>ボックス4</p>
	<p>ボックス5</p>
	<p>ボックス6</p>
</div>

CSS

.calc_test {
	width: 602px;
	display: flex;
	flex-wrap: wrap;
}
.calc_test p {
	width: calc(100% / 3);
}

回避方法

IE11のみに適用されるCSSハックを使用して回避しました。

CSS

.calc_test {
	width: 602px;
	display: flex;
	flex-wrap: wrap;
}
.calc_test p {
	width: calc(100% / 3);
}
*::-ms-backdrop, .calc_test p {
	width: 33.33%; /* IE11 */
}

修正後

修正後のデモを見る

※IE11でご覧ください。

まとめ

他のブラウザやWindows10のEdgeでは崩れることなく表示されたので、IE11のみの現象かと思われます。

IE8がなくなったと思ったらまだまだ色々あるんですね。。。

もし、他に良い方法がありましたら教えてください！