How to make a sticky footer using flexbox in IE11?

A solution that really helped me (may not be applicable in all cases) is adding an arbitrary fixed height in pixels - the min-height overrides the fixed height so there's no cropped content. Here's a CSS example:

.fullheight {
    min-height: 100vh;
    height: 200px; /*IE 11 flexbox min-height fix*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
}

On main, instead of flex: 1 use flex: auto. That should be all you need.

The flex: 1 shorthand rule breaks down to:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

The flex: auto shorthand rule breaks down to:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: auto

IE has trouble parsing flex-basis: 0.

More information:

• flex property not working in IE

IE has a min-height bug and needs display: flex on the flex column containers parent, in this case the html

Fiddle demo

Update your CSS like this

*,
*:after,
*:before {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  display: flex;
}
body {
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex-grow: 1;
}

<header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>