Good day. I can not understand why in IE11 block .main does not work correctly!

body { margin: 0; min-height: 100vh; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; } .header { -ms-flexbox: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; height: 200px; background: #777; } .main { -webkit-flex: 1; -ms-flex: 1; flex: 1; background: red; } .footer { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; height: 200px; background: #777; } 
 <header class="header"></header> <main class="main"></main> <footer class="footer"></footer>

https://jsfiddle.net/un68kwwo/1/ - everywhere it works well, but in IE11 there is a cant, although it has very good flexbox support.

  • 2
    because the main tag is not supported by IE htmlbook.ru/html/main - binliz
  • Hm Some kind of horror, but this does not solve the problem, even if in the example you change main to div - Dima Turks

1 answer 1

Try this:

 * { box-sizing: border-box; } html, body { height: 100vh; //В IE работает только с 100vh, с min-height - не работает } body { display: flex; flex-direction: column; } .header { height: 200px; background: #777; } .main { width: 100%; flex-grow: 1; background: red; padding: 20px; //Обязательно задаем хоть какой-то размер (здесь добавлен паддинг, чтобы в примере было видно, что .main отображается) } .footer { height: 200px; background: #777; } 
 <div class="header"></div> <div class="main"> Lorem ipsum </div> <div class="footer"></div>