Flex page-layout not working in IE11 - flex grow not playing nice

Question

I'm trying to set up a simple page layout using flex but cannot seem to get it to work in IE11. The main component refuses to grow to fill the space like it does in Chrome or Safari. I've read everything I can find about flex-grow on IE but to no avail.

    html, body {
     width: 100vw;
     min-height: 100vh;
     margin: 0;
     padding: 0;
    }
    body {
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
     -webkit-flex-direction: column;
     flex-direction: column;
     background: black;
    }
    header {
     background: pink;
     height: 100px;
    }
    main {
     background: lightgrey;
     -webkit-flex: 1 0 auto;
     -ms-flex: 1 0 auto;
     flex: 1 0 auto;
     height: 100%;
    }
    footer {
     background: lightblue;
     -webkit-flex: 0 0 auto;
     -ms-flex: 0 0 auto;
     flex: 0 0 auto;
     height: 100px;
    }

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <header class="navigation">
  <ul>
   <li>
    <a href="#"><span>Privacy</span></a>
   </li>
   <li>
    <a href="#"><span>Sitemap</span></a>
   </li>
   <li>
    <a href="#"><span>Newsletter</span></a>
   </li>
  </ul>
 </header>
 <main>
  The main Section
 </main>
 <footer>
  Footer
 </footer>
</body>
</html>

score 2 · Answer 1 · answered Mar 21 '18 at 11:09

2

You need to give,

height:100%; for html and body

and need to remove

height: 100%  from main

answered Mar 21 '18 at 11:09

Arun Mathew

69
6

But of course!! Thanks for the quick response. – S Chalk Mar 21 '18 at 11:21
@SChalk did it work on your system... Its working with mine.. – Arun Mathew Mar 21 '18 at 12:10
Seems to be working like a charm on IE11, Safari, and Chrome :) – S Chalk Mar 22 '18 at 12:21

Flex page-layout not working in IE11 - flex grow not playing nice

1 Answers1