IE11でdisplay: flexで並べた画像がカラム落ちするー

<ul class="list">
  <li><img src="sample.png" alt=""></li> 
  <li><img src="sample.png" alt=""></li> 
  <li><img src="sample.png" alt=""></li> 
  <li><img src="sample.png" alt=""></li> 
  <li><img src="sample.png" alt=""></li> 
  <li><img src="sample.png" alt=""></li> 
  <li><img src="sample.png" alt=""></li> 
</ul>

  .list {
    display: flex;
    flex-wrap: wrap;
  }
  .list li {
    width: calc(100% / 3);
  }

こんな感じで画像を3列にぴったり並べて、画面幅で折り返すようなレイアウトを作りました。

基本的にこれで問題ないのですが、IE11でウィンドウサイズを変化させると一定間隔で3列→2列を繰り返しすようになってしまいました。

ドウシテコウナッタ？？

おそらく flexitemの幅を calcで計算してしまってるため、割り切れない数字のためこんなことになってるんだと思います。

なので、ちょっと調整してみました。

  .list {
    display: flex;
    flex-wrap: wrap;
  }
  .list li {
    width: calc((100% / 3) - .01px); ← 修正
  }

割り切れないのが問題なら、少し減らしてやればいんじゃね？ってことで - .01px を加えて見ました。

そうすると、カラム落ちもなくなり、全ブラウザで期待する表示となりました。

.01px だったら見た目には全くわからないので、もしIE11で同様な現象に遭遇した場合はやって見てもいいのではないでしょうか。