https://uga-box.hatenablog.com/entry/2020/08/02/000000

あるページのコンテンツが少ない場合はフッターをウィンドウ下部に固定し、コンテンツがウィンドウサイズを超える場合はフッターをコンテンツの下におくというレイアウトを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;

というようにする必要があった

参考