Как исправить липкий нижний колонтитул Flexbox в IE11

Question

Я создал липкий нижний колонтитул с помощью flexbox. Он работает во всех браузерах, кроме 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>

Почему это нарушение в IE11 и как я могу это исправить?

Answer 1

Проблема в том, что в IE11 flexbox не будет соблюдать min-height, поэтому гибкая коробка разрушается до высоты ее содержимого.

Вы можете исправить это, обернув свою гибкую коробку внутри другой гибкой коробки, которая также имеет flex-direction: column. Вам также необходимо установить flex: 1 на ваш оригинальный flexbox. По какой-то причине это заставляет вложенную флексограмму соблюдать любые ее 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

Попробуйте

flex: 1 0 auto; 

для блока содержимого