How do you fix the flexbox in ie11?



  • Good afternoon. I can't understand why IE11 block block block .main It doesn't work right!

    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/ - He works well everywhere, but he works. IE11 Cossack, though he's got flexbox support very good.



  • Let's just say,

    * {
      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>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2