Alexey Mitev Alexey Mitev - 3 months ago 29
HTML Question

IE11 calculates the height of parent flex container incorrectly

I'm trying to use a flexbox-based layout to display a page with a sticky footer. This works well with short pages (less than the height of the window) in all browsers. However, the same approach with long pages works in Firefox, but IE11 cuts the container element to about 25% of the child element.

Here is the example: https://codepen.io/vers/pen/rraKYP



html {
height: 100%;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
}
div.container {
max-width: 600px;
background-color: #aaa;
flex-grow: 1;
display: flex;
flex-direction: column;
font-family: 'Roboto', sans-serif;
font-size: 20px;
line-height: 1.5;
}
div.content {
margin: 8px;
flex-grow: 1;
}
div.header,
div.footer {
background-color: black;
color: #fff;
}

<html>

<body>
<div class="container">
<div class="header">Header</div>
<div class="content">
<p>...</p>
<!-- 40 long paragraphs here -->
</div>
<div class="footer">Footer</div>
</div>
</body>

</html>




Answer

When you use the height property, some browsers will interpret that as the limit. As an alternative, use min-height.

Instead of this:

html {
  height: 100%;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

Just use this:

body {
  min-height: 100vh;      
  display: flex;
  flex-direction: column;
}

Tested in Chrome, Firefox, IE 11 & Edge.

revised codepen


UPDATE

This also works:

html {
  display: flex;
  flex-direction: column;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

Tested in Chrome, FF, IE11 & Edge.

revised codepen