Come correggere un Flexbox Sticky Footer in IE11

Question

Ho creato un footer sticky utilizzando flexbox. Funziona su tutti i browser tranne 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>

Perché è rottura in IE11 e come posso risolvere il problema?

Answer 1

Il problema è che in IE11 la flexbox non rispetta lo min-height, quindi la casella flex si riduce all'altezza del suo contenuto.

Puoi sistemarlo avvolgendo la tua flexbox all'interno di un'altra cassaforte che ha anche flex-direction: column. Dovrai inoltre impostare flex: 1 sulla tua flexbox originale. Per qualche motivo questo costringe la flexbox nidificata a onorare qualsiasi suo 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>

Answer 2

Prova

flex: 1 0 auto; 

per bloccare i contenuti