尝试实现 flexbox 以填充网页的剩余高度，但在 chrome 中不起作用

Question

我一直在尝试使用 flexbox 将某些 div 的大小自动调整为 'fill' 网页上的剩余高度，但在 Chrome 中（可能是由于 flexbox 设置的高度，而不是明确的），我无法正确控制内容的溢出。这是一个很难用语言表达的问题，所以我举个例子：

<div style="height:250px">   
    <div class="flex-container-vertical" style="height: 100%">
        <div class="header">
            HEADER
        </div>
        <div class="fill-remainder" style="overflow:hidden">
            <div class="flex-container-vertical" style="height: 100%">
                <div class="secondheader">
                  SECOND HEADER
                </div>
                <div class="fill-remainder" style="overflow:auto">
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                </div>
            </div>
        </div>
        <div class="footer">
            FOOTER
        </div>
    </div>    
  </div>

.flex-container-vertical {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.fill-remainder {
    flex: 2;
}

.header {
    background: salmon;
    height:50px;
}

.secondheader {
    background: lavender;
    height: 50px;
}

.footer {
    background: lightblue;
    height: 50px;
}

body {
    overflow: hidden;
    height: 100%;
}

http://codepen.io/anon/pen/JdqJQB

如果你在大多数浏览器中打开上面的codepen，"BODYCONTENT"文本的溢出是可以滚动的。但是，如果在GoogleChrome中打开，则不是。

在下面的例子中，溢出在 Chrome 中正常工作，但它不再由 flexbox 设置，所以我试图实现的 'fill remaining' 高度特征被消除了。

<div style="height:250px">   
    <div class="flex-container-vertical" style="height: 100%">
        <div class="header">
            HEADER
        </div>
        <div class="fill-remainder" style="overflow:hidden; height:150px">
            <div class="flex-container-vertical" style="height: 100%">
                <div class="secondheader">
                  SECOND HEADER
                </div>
                <div class="fill-remainder" style="overflow:auto">
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                    BODYCONTENT<br/>
                </div>
            </div>
        </div>
        <div class="footer">
            FOOTER
        </div>
    </div>    
  </div>

.flex-container-vertical {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.fill-remainder {
    flex: 2;
}

.header {
    background: salmon;
    height:50px;
}

.secondheader {
    background: lavender;
    height: 50px;
}

.footer {
    background: lightblue;
    height: 50px;
}

body {
    overflow: hidden;
    height: 100%;
}

http://codepen.io/anon/pen/aOrweK

说来话长，为什么我必须以这种方式实现事情，但有人在我之前写了代码，实际内容的某些部分是动态加载的，无法正常工作 table布局。我还应该补充一点，我不能使用 position:absolute，因为它在移动设备上有奇怪的行为，我被告知不要这样做。

感谢所有提出建议的人！

Answer 1

尝试将 fill-remainder 的溢出设置为自动。

<div class="fill-remainder" style="overflow:auto">

http://codepen.io/anon/pen/JdqJEr

Answer 2

这是你想要的吗？ DEMO

HTML

您需要 flexbox 可以提供的一些行为，只是您必须记住 3 个 flex-container 属性，允许它正确地操作它的 children。

当您的 flex-direction 为 row

justify-content

如果 flex-direction 是 column 则使用 align-items
如果您要多于一个 row 或 column，则使用 align-content

所以我应用了前面提到的内容（align-content除外）。我真的不需要 justify-content 但我总是将它和 align-items 一起使用，因为它对于响应式布局很方便。重要的是 align-items: stretch，它允许您所有的 flex-children 到达网页底部。我还把你最外面的 div 设置为 height: 100vh 我认为它最初是 250px 所以无论你尝试什么， 250px div 都会阻碍你的尝试。

顺便说一句，我更改了一些 class 名称，因为它们对我来说太长了（懒惰的大脑）。

PS，除非你关心 Android 4.4 和 IE8，否则你唯一需要的 vendor prefixes 是一组 -webkit- for Safari。

<div style="height:100vh">   
<div class="flexShell" style="height: 100%">
    <div class="header">
        HEADER
    </div>
    <div class="flexFill" style="overflow:hidden">
        <div class="flexShell" style="height: 100%">
            <div class="secondheader">
              SECOND HEADER
            </div>
            <div class="flexFill" style="overflow:auto">
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
                BODYCONTENT<br/>
            </div>
        </div>
    </div>
    <div class="footer">
        FOOTER
    </div>
</div>

CSS

 .flexShell {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  height: 101%;
}

.flexFill {
  flex: 2;
  height: 101%;
  overflow: auto;
}

.flexOver {
  flex: 2;
  height: 101%;
  overflow: visible;
}

.header {
  background: salmon;
  height: 50px;
}

.secondheader {
  background: lavender;
  height: 50px;
}

.footer {
  background: lightblue;
  height: 50px;
}

body {
  overflow: hidden;
  height: 100%;
}

尝试实现 flexbox 以填充网页的剩余高度，但在 chrome 中不起作用

Trying to implement flexbox to fill remaining height of webpage, but not functioning in chrome

html

javascript

css

google-chrome

flexbox

HTML

CSS