html - 显示 :flex or height:auto not working

Question

为什么样式为 display:flex 或 height:auto 的 div 不将 div 扩展到页面底部？特别是当父 div 设置为 height:100% 时？

我提供了一个非常具体的例子来证明这一点:

http://jsfiddle.net/p1fxh128/1/

<div style="height:100vh">
  <section style="height:100vh">
        Welcome...red div below should fill entire container        

            <section style="display:flex; flex-direction: column; background:red; height: auto">
              <header>
                Red Header Here...
              </header>
              <div>
                Red Body here...
              </div>
              <footer>
                Red Footer here...
              </footer>
            </section>

        Random stuff below should still be displayed

    </section>
</div>

请注意本例中的红色 div。为什么不垂直填充网格？

Answer 1

我假设您的意思是红色部分应该占用页面的剩余部分而不是页面本身的 100%。

既然如此。

* {
    -webkit-background-origin:;
    background-origin:;
    margin: 0;
}
.wrap {
    height:100vh;
}
.wrap > section {
    height:100vh;
    display:flex;
    flex-direction: column;
}
.wrap > section > section {
    background:red;
    flex:1;
}

<div class="wrap">
    <section>Welcome...red div below should fill entire container
        <section>
            <header>Red Header Here...</header>
            <div>Red Body here...</div>
            <footer>Red Footer here...</footer>
        </section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit perferendis fugit, ducimus veniam voluptates debitis. Voluptas, recusandae impedit numquam obcaecati accusamus consequuntur, illo fuga ea enim quod facere, repellat tempore!</section>
</div>