Firefox 中的嵌套 flex 容器溢出

Question

我正在开发一个使用 UI-Router 和许多嵌套视图的网络应用程序。我们的主视图使用 Flex 来占据屏幕上的所有可用空间（高度和宽度）。我这样说是为了确定为什么我们有这么多嵌套的弹性容器。

TL;DR;

JSFiddle showing the problem

在 IE 和 Chrome 上，以下 JSFiddle 可以按您预期的方式工作。所有外部 div 都适合页面，而最里面的 div 有一个滚动条用于内部溢出的内容。

在 Firefox 上，滚动条位于主体或外部 div 之一上，而容器根本不起作用。

我需要在所有浏览器中保持一致的行为，有什么想法吗？

更长的解释：

我们的应用在 Chrome 和 IE10+ 上运行良好，但在 Firefox 上，flex 容器似乎也无法按照我们需要的方式运行。我们的意图是让最下面的 flex 容器具有自动溢出功能，并且让其余的容器简单地适应屏幕而无需滚动条。

我已经尝试确保我们使用所有跨浏览器的 flex 前缀，所以当我们声明一个 flex 容器（使用 LESS mixins）时，结果是这样的：

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+ */
width: 100%; /* For old syntax, otherwise collapses. */

当我们声明要 flex 的东西时，输出如下：

-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */    

这导致许多嵌套的 flex 容器在 IE 和 Chrome 上运行良好，但 Firefox 做的事情有些古怪。在 IE/Chrome 上，最里面的容器包含溢出并在需要的地方放置一个滚动条，而 firefox 要么根本不包含它，要么将滚动条放在最外面的容器上。看起来firefox根本不尊重flex。

我需要在所有浏览器中保持一致的行为，有什么想法吗？这需要是一个纯 css 解决方案，因为我在项目中太远了，无法更改我的 HTML 结构。

JSFiddle showing the problem

更新

我尝试了以下实现，但很遗憾，它不起作用。我相信不同之处在于我的顶级容器中有一个侧边栏，这使示例的其余部分有所不同。我很抱歉最初没有包含这个细节，因为它显然很重要。

这里有两个额外的小技巧，（我认为）可以更好地表示场景。

使用flex: 1;

JSFiddle for flex 1

您会注意到这在 IE11 和 Chrome 中效果很好，但在 Firefox 上效果不佳。

使用flex: auto;

JS Fiddle for flex auto

这对任何事情都不起作用......

Answer 1

将你所有的 flex:1 更改为 flex:auto 我很确定这就是你所追求的。

css:

html, body
{
    height: 100%;
    padding: 0;
    margin: 0;
}
.outer-container {
    box-sizing: border-box;
    border: 4px solid #00f;
    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+ */
    width: 100%; /* For old syntax, otherwise collapses. */
    height: 100%;
}
.container {
    box-sizing: border-box;
    border: 4px solid #0ff;
    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+ */
    width: 100%; /* For old syntax, otherwise collapses. */
    -webkit-box-flex: auto; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: auto; /* OLD - Firefox 19- */
    -webkit-flex: auto; /* Chrome */
    -ms-flex: auto; /* IE 10 */
    flex: auto; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.inner-container {
    box-sizing: border-box;
    border: 4px solid #f0f;
    -webkit-box-flex: auto; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: auto; /* OLD - Firefox 19- */
    -webkit-flex: auto; /* Chrome */
    -ms-flex: auto; /* IE 10 */
    flex: auto; /* NEW, Spec - Opera 12.1, Firefox 20+ */    
    overflow-y: hidden;
    overflow-x: auto;
}
.overflow {
    box-sizing: border-box;
    border: 4px solid #f00;
    height: 100px;
    width: 900px;
}

小提琴： https://jsfiddle.net/rL0r8nez/5/

Answer 2

如果您在示例中使用flex: 1; 设置.container {max-width: 100%;}，那么您将在Firefox 中获得内部滚动条。