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?

Impediment

Answer 1

Try

flex: 1 0 auto;

for content block

Kathikathiawar

Odd. For me it does not work in IE11. The body/content just gets the height of a single line of text. – Berlyn

After some tinkering it does appear to work when I also add body { display: flex }. Not sure why. – Berlyn

@Berlyn I'm kind of late to the party, but the flex property only work for elements which use the flex display. The flexbox mechanism introduces a lot of cool features. You can check them out here. – Iconostasis

@IonuțCiuta, my point was more subtle. The OP already sets flex display to the container (.Page). However, I could only achieve the desired result if I also apply flex display to the body, which seems unrelated. My best guess is that this is an artifact of the specific way the IE11 rendering engine handles the flex model. – Berlyn

Holy moly. Came here 2 years later. Have been trying to fix flexbox in IE7 for weeks now and this is finally the solution I've been looking for. Thanks! – Podgy

For me, in a slightly different situation, I had to do this along with the suggestion made by @nacht-reinstate-monica and change min-height to height on my page container. Thank you! – Abramson

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>

Impediment

Doesn't work good in IE11 when content of .Page-body gets bigger then it's parent height: codepen – Infelicity

@Cake_Seller, did you solve this issue when inner content gets bigger than the parent container? – Tramel

@ArtyomPranovich nope, unfortunately not. – Infelicity

I added those styles to the body { display: flex; width: 100%; flex-direction: column; } (my body only contains a single div#app, as many webapps do and which has the same role like above .Page) and things appear to be fine in IE11, Edge and Windows Chrome. Short and Long pages. – Grand

Instead of flex: 1 on .Page-body, do flex-grow:1 and flex-shrink: 0. That does it for me. – Epanodos

Answer 3

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.

Battista