使用显示在一列中填充剩余的垂直空间：flex

Question

如何使用display: flex使一个div填充剩余的垂直空间？

在我下面的示例中，main元素应该填充nav未使用的所有空间。如果这工作正常，我们不会看到任何红色。

http://jsfiddle.net/36r3mL36/

HTML：

<nav></nav> 
<main></main> 

CSS：

body { 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    background: red; 
    margin: 0; 
} 

nav { 
    height: 40px; 
    background: orange; 
} 

main { 
    display: flex; 
    flex: 1; 
    background: purple; 
} 

Answer 1

尝试增加html旁边的body选择。

html, body { 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    background: red; 
    margin: 0; 
} 

但是，我会建议将flex的东西放在一个容器内。

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

 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    background: red; 
 
} 
 

 
nav { 
 
    height: 40px; 
 
    background: orange; 
 
} 
 

 
main { 
 
    display: flex; 
 
    flex: 1; 
 
    background: purple; 
 
}

<div class="container"> 
 
    <nav></nav> 
 
    <main></main> 
 
</div>