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

Question

我一直在尝试使用 flexbox 自动调整某些 div 的大小以“填充”网页上的剩余高度，但在 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”文本的溢出是可滚动的。但是，如果在 Google Chrome 中打开，则不会。

在下面的示例中，溢出在 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; 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

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

感谢所有提出建议的人!

Answer 1

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

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

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