IEにflexboxの対応をしてあげた

今まではchromeでしか検証をしていなかったが、現在委託として入らせていただいている企業では IE対応が必要だったので今後の為にも備忘録として記事に残しておく。

IEのバージョンは 11 で 8 じゃなくてなくてよかった。

親要素のwidthを超えたwidthになる

下記のようなクラスがあったとして、IEではこのスタイルを親とした時、 その子要素のwidthがはみ出してしまうというバグがある。

これは https://github.com/philipwalton/flexbugs#flexbug-2 にも記載があり、 同時に対応方法も書かれている。 私は今回 max-width: 100% を適用することでこの問題を解決することができた。

.ie-bug-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

justify-content: space-between が効かない

flex-direction: column と justify-content: space-between を使って子要素を簡単に固定化させてヘッダ・フッタを作っていました。

が、IEでは、フッタが固定化されず、上に上がってしまいました。

WEB上では、 &:before/&:after 要素が入ってしまったことが原因との記事が多く見られましたが、私の場合これでは解決できませんでした。 比較的多く時間を使ってしまったので、flex-direction は諦めて flex-grow: 1 という便利機能を使ってフッタまでの高さを長くさせました。

今から考えてみれば min-height を指定していたので下記のバグに相当していたから何じゃないかなと思いました。 ですが、解決方法は heightを指定するか子要素でラップするかだったので、できるだけ構造を変えたくなかった理由から flex-grow: 1 で解決できてよかったです。

https://github.com/philipwalton/flexbugs#flexbug-3