IEでのみカラム落ちが起きる

200pxのボックス（親要素）の中に3つの要素（子要素）が均等に並ぶようにcalc関数を使用し下記のように指定を行いました。
Chrome、Firefox、Safari、Edgeでは正常に表示されることが確認できましたが、IEでのみカラム落ちが起きました。
※IEでの表示を推奨します。

See the Pen 190425_01 by o (@oioi_oioi) on CodePen.

カラム落ちの原因

結論から言いますと子要素のwidthの数値の「100% / 3」に問題がありました。

width: calc(100% / 3);

どう考えても「100% / 3」の商は「33.333・・・%」で割り切れない数字です。
「33.333・・・%」がIEでは繰り上がりになり、1つ分の子要素のwidthが「34%」として指定され、3つ並んだ時の全体の幅が「102%」になったのだと予測できます。
「102%」は親要素の横幅を越えているので、カラム落ちするしかありません。

Can I Useで確認してみたところ、そもそもcalc関数はIEのみ部分的なサポートであることがわかります。

解決方法1

割り切れずカラム落ちが起きてしまうのならば割り切れる数字にする、又はcalc関数での指定やめると良いのではないでしょうか。

ただ、どちらの方法も1%分のスペースが空いてしまうので、詰めて並べたい場合にはデザインに合わせて調整を行う必要があります。

width: calc(99% / 3);

See the Pen 190425_02 by o (@oioi_oioi) on CodePen.

width: 33%;

See the Pen 190425_03 by o (@oioi_oioi) on CodePen.

解決方法2

2つ目は親要素のwidthを変更し、子要素をpx指定にするという方法です。

元々の親要素の「width: 200px;」も3では割り切れません。
親要素自体の数字を変更することによって割り切ることができ、”方法1“と違い横幅いっぱいに3つの要素を並べることができます。

■親要素　width: 201px;
■子要素　width: 67px;

See the Pen 190426_01 by o (@oioi_oioi) on CodePen.

まとめ

calc関数を指定する際には子要素だけでなく、親要素の数値にも気を配るとカラム落ちを回避することができます。
また、デザインの段階でキリの良い数字にするなどコーディングに考慮すると良いでしょう。