使用display：flex将div填充到列中的剩余垂直空间

Question

如何使用display: flex？

使div填充剩余的垂直空间

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

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内容放入容器中。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;