Firefox v36及更高版本中的CSS Flexbox问题

我试图使用CSS Flexbox（display:flex）占据窗口的剩余高度。我还想滚动可用。。。也许我在这件事上做得不对，但我已经找了这么久，以至于我找不到其他的选择

这个想法是有一个固定的容器。在这个固定的容器中有一个flexbox，它占据了100%的高度。我将项目添加到堆叠在列中的flex box中。我添加的最后一个项目（容器包装器）中有动态内容，它将通过AJAX调用替换HTML（否则我只需将操作栏移到包装器外，就可以使用它完成操作）。此内容包装器也是一个flex容器（以及flex项），设置为随窗口的高度而增长和收缩。这个flex容器的最后一项应该允许在窗口缩小时滚动

...

在IE 10+、Chrome中似乎可以工作，但Firefox没有添加滚动条，因为容器包装器的高度由于内部内容而变得无限大。我应该提到的是，Firefox的旧版本显示正确（我想是33），但更新版本显示不正确

我找到了一个解决方法，在这里我设置了内部容器位置：相对，然后将其内部内容包装在一个div中，绝对位置设置为0表示顶部、左侧、底部和右侧。我不喜欢这样，因为它似乎违背了flexbox布局的目的。有没有什么方法可以让这个概念在浏览器中很好地发挥作用，而不必进行标记攻击？

添加以下内容：

。容器包装器{
最小高度：0；
}

html{
框大小：边框框；
}
*，*：之前，*：之后{
框大小：继承；
}
html，正文{
保证金：0；
身高：100%；
}
.固定{
位置：固定；
顶部：60px；
右：0；
底部：0；
宽度：100%；
最大宽度：400px；
}
.外部{
边框：1px纯黑；
身高：100%；
显示：-ms flexbox；
显示器：flex；
-ms-flex方向：列；
弯曲方向：立柱；
}
.外部>*{
-ms-flex:0自动；
flex:0自动；
}
.集装箱包装{
-ms-flex:1100%；
弹性：1100%；
显示：-ms flexbox；
显示器：flex；
-ms-flex方向：列；
弯曲方向：立柱；
最小高度：0；
}
.动作条{
-ms-flex:0自动；
flex:0自动；
边框顶部：1件纯银；
边框底部：1px纯银；
填充：20px；
文本对齐：右对齐；
}
.集装箱{
-ms-flex:1100%；
弹性：1100%；
溢出y：自动；
}
.名单{
显示：-ms flexbox；
显示器：flex；
填充顶部：10px；
垫底：10px；
边框：1px纯水；
}
.显示名称{
-ms-flex:1100%；
弹性：1100%；
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
右边填充：8px；
}
.显示日期{
-ms-flex:0自动；
flex:0自动；
}

头衔

我什么都不做，只是占据空间
显示名称
2015年3月31日
非常长的名称，应该被截断。我不知道
2015年3月31日
显示名称
2015年3月31日
显示名称
2015年3月31日
显示名称
2015年3月31日

添加以下内容：

。容器包装器{
最小高度：0；
}

html{
框大小：边框框；
}
*，*：之前，*：之后{
框大小：继承；
}
html，正文{
保证金：0；
身高：100%；
}
.固定{
位置：固定；
顶部：60px；
右：0；
底部：0；
宽度：100%；
最大宽度：400px；
}
.外部{
边框：1px纯黑；
身高：100%；
显示：-ms flexbox；
显示器：flex；
-ms-flex方向：列；
弯曲方向：立柱；
}
.外部>*{
-ms-flex:0自动；
flex:0自动；
}
.集装箱包装{
-ms-flex:1100%；
弹性：1100%；
显示：-ms flexbox；
显示器：flex；
-ms-flex方向：列；
弯曲方向：立柱；
最小高度：0；
}
.动作条{
-ms-flex:0自动；
flex:0自动；
边框顶部：1件纯银；
边框底部：1px纯银；
填充：20px；
文本对齐：右对齐；
}
.集装箱{
-ms-flex:1100%；
弹性：1100%；
溢出y：自动；
}
.名单{
显示：-ms flexbox；
显示器：flex；
填充顶部：10px；
垫底：10px；
边框：1px纯水；
}
.显示名称{
-ms-flex:1100%；
弹性：1100%；
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
右边填充：8px；
}
.显示日期{
-ms-flex:0自动；
flex:0自动；
}

头衔

我什么都不做，只是占据空间
显示名称
2015年3月31日
非常长的名称，应该被截断。我不知道
2015年3月31日
显示名称
2015年3月31日
显示名称
2015年3月31日
显示名称
2015年3月31日

<!-- The fixed container -->
<div class="fixed">
    <!-- The first flex container - direction: column -->
    <div class="outer">
        <div class="some-flex-item"></div>
        <div class="some-flex-item"></div>
        <!-- Grow and shrink with 100% of height -->
        <div class="container-wrapper">
            <!-- inner HTML is dynamic -->
            <!-- flex: 0 0 auto -->
            <div class="action-bar"></div>

            <!-- Want this div to take up remaining height of window
                 and have overflow-y scrolling -->
            <div class="container">
                ...
            </div>
        </div>
    </div>
</div>