あるページのコンテンツが少ない場合はフッターをウィンドウ下部に固定し、コンテンツがウィンドウサイズを超える場合はフッターをコンテンツの下におくというレイアウトをCSS3のflexboxを使って行っていた
実装は以下のような感じ
body{ display: flex; min-height: 100vh; flex-direction: column; } #contents { flex: 1; } footer{ }
しかし、この実装でIE11で表示崩れが起きてしまった
事象は、コンテンツがウィンドウサイズを超えていてもフッターがウィンドウ下部に固定されてしまい、コンテンツに被さって表示されている
この原因を調べた結果、IE11ではflexのショートハンドが他のブラウザとは異なり省略が不可だった
つまり、flexの以下のショートハンドで
flex: flex-grow flex-shrink flex-basis ;
のうち、flex-growだけを指定し
flex: 1;
としていたが、
flex: 1 0 auto;
というようにする必要があった
