How Do I Fix A Flexbox Sticky Footer In IE11

Question

I have created a sticky footer using flexbox. It works in all browsers apart from IE11.

Codepen

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.Page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.Page-header {
  background: blue;
}

.Page-footer {
  background: green;
}

.Page-body {
  background: red;
  flex: 1;
}

<div class="Page">
  <header class="Page-header">
    HEADER
  </header>
  <div class="Page-body">
    BODY
  </div>
  <footer class="Page-footer">
    FOOTER
  </footer>
</div>

Why is it breaking in IE11 and how can I fix it?

Answer 1

Try

flex: 1 0 auto;

for content block

Answer 2

The problem is that in IE11 flexbox won't honour min-height, so the flex box collapses to the height of its contents.

You can fix it by wrapping your flexbox inside another flexbox that also has flex-direction: column. You will also need to set flex: 1 on your original flexbox. For some reason this forces the nested flexbox to honour any its min-height.

Codepen

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.Wrapper {
  display: flex;
  flex-direction: column;
}

.Page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.Page-header {
  background: blue;
}

.Page-footer {
  background: green;
}

.Page-body {
  background: red;
  flex: 1;
}

<div class="Wrapper">
  <div class="Page">
    <header class="Page-header">
      HEADER
    </header>
    <div class="Page-body">
      BODY
    </div>
    <footer class="Page-footer">
      FOOTER
    </footer>
  </div>
</div>