Flexbox, min-height i IE11

Question

Próbuję zrobić prosty projekt z flexbox, ale mam problem z IE11. Zasadniczo chcę stopki, która trzyma się dna tylko wtedy, gdy zawartość nie jest wystarczająco wysoka. Nie mam problemu z Chrome że robi tak:

*, 
 
*:after, 
 
*:before { 
 
    box-sizing: border-box; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
main { 
 
    flex: 1; 
 
}

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

prostu grać z numerem <p>main</p> zobaczyć niewłaściwego zachowania z IE11.

Czy istnieje sposób na osiągnięcie tego bez JavaScript?

Answer 1

IE ma min-height błąd i potrzebuje display: flex na flex kontenerów kolumna rodzic, w tym przypadku html

Fiddle demo

Aktualizacja CSS jak ten

*, 
 
*: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>

Answer 2

Na main, zamiast flex: 1 użyj flex: auto. To powinno być wszystko, czego potrzebujesz.

---

flex: 1 skrótowym reguła załamuje się:

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

flex: auto skrótowym reguła załamuje się:

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

IE ma problemy z parsowania flex-basis: 0.

Więcej informacji:

• flex property not working in IE