internet explorer 11でflexboxを使ってフッターを最下部に表示できません

前提・実現したいこと

flexboxでフッターを最下部に表示したいです

発生している問題・エラーメッセージ

internet explorer11でarticleが表示されません。どうすれば表示されますか。
また、何か間違っていることがあれば教えてください。

該当のソースコード

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>a</title> <style> body { display: flex; flex-direction: column; min-height: 100vh; } header { background-color: red; height: 100px; } article { background-color: blue; flex: 1; } footer { background-color: green; height: 100px; } </style> </head> <body> <header></header>

    <article> </article>
    
    <footer> </footer>
</body>

</html>

m.ts10806

2019/12/21 05:25

コードはマークダウンのcode機能を利用してご提示ください

行動規範の内容に同意します

回答1件

ベストアンサー

IE11だと、flex: 1; が効かないみたいですね。
高さを指定する必要があるようです。

css
1body {
2/*    display: flex;
3    flex-direction: column; */
4    min-height: 100vh;
5    margin: 0; /* 追加 */
6}
7
8header {
9    background-color: red;
10    height: 100px;
11}
12
13article {
14    background-color: blue;
15/*    flex-grow: 1; */
16    min-height: calc(100vh - 200px); /* 追加 */
17}
18
19footer {
20    background-color: green;
21    height: 100px;
22}