How Do I Fix A Flexbox Sticky Footer In IE11

I got around it using flexbug's recommendation of changing min-height on the body to just height

Only works for certain circumstances, sticky footers seem to be one of the common use cases.

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>

Try

flex: 1 0 auto;

for content block