Javascript 尝试实现flexbox以填充网页的剩余高度，但在chrome中无法运行

我一直在尝试使用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%;
}

标题
第二个标题
正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

页脚
.柔性容器垂直{
显示：-webkit框；/*旧版-iOS 6-，Safari 3.1-6*/
显示：-moz-box；/*OLD-Firefox 19-（有bug，但大部分有效）*/
显示器：-ms flexbox；/*TWEENER-IE 10*/
显示：-webkit flex；/*新-Chrome*/
显示：flex；/*新，规范-Opera 12.1，Firefox 20+*/
-莫兹盒方向：垂直；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
}
.填补剩余部分{
弹性：2；
}
.标题{
背景：鲑鱼；
高度：50px；
}
.secondheader{
背景：薰衣草；
高度：50px；
}
.页脚{
背景：浅蓝色；
高度：50px；
}
身体{
溢出：隐藏；
身高：100%；
}

如果在大多数浏览器中打开上述代码笔，“BODYCONTENT”文本的溢出是可滚动的。然而，如果它是在谷歌浏览器中打开的，它就不是

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

标题
第二个标题
正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

正文内容

页脚
.柔性容器垂直{
显示：-webkit框；/*旧版-iOS 6-，Safari 3.1-6*/
显示：-moz-box；/*OLD-Firefox 19-（有bug，但大部分有效）*/
显示器：-ms flexbox；/*TWEENER-IE 10*/
显示：-webkit flex；/*新-Chrome*/
显示：flex；/*新，规范-Opera 12.1，Firefox 20+*/
-莫兹盒方向：垂直；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
}
.填补剩余部分{
弹性：2；
}
.标题{
背景：鲑鱼；
高度：50px；
}
.secondheader{
背景：薰衣草；
高度：50px；
}
.页脚{
背景：浅蓝色；
高度：50px；
}
身体{
溢出：隐藏；
身高：100%；
}

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

---

感谢所有有建议的人

尝试将填充剩余物的溢出设置为自动

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

这就是你想要的吗

HTML 您需要flexbox能够提供的一些行为，只是您必须记住3个flex容器属性，它们允许flexbox正确地操作其子级

当您的

弹性方向

为

行

如果

弹性方向

为

列

，则使用

如果您的e将有多个

行

或

列

，则使用

因此，我应用了前面提到的内容（align内容除外）。我真的不需要

证明内容

，但我总是使用它，并将项目对齐在一起，因为这样便于响应版面。重要的是

align items:stretch

，它允许您的所有flex子项到达网页底部。我还将您最外层的

div

设置为

height:100vh

我认为它最初是

250px

，所以无论您尝试什么，该

250px

div

都会阻止您的尝试

顺便说一句，我更改了一些类名，因为它们太长，我无法处理（懒惰的大脑）

另外，除非你担心安卓4.4和IE8，否则你只需要一套Safari的

-webkit-

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

---

哦，不，等等。。在我的情况下，无法将溢出设置为自动，我需要在内部元素上设置滚动功能：（嗯……有点。不幸的是，这个例子在firefox中不起作用。不过，我可能可以让我的和你的之间的一些东西起作用。在那里，我用你的来实现它。谢谢！（我直到今天才尝试）。我以为你想覆盖整个页面？我完美地修复了它：不，问题不是它无法填满整个页面

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