Question

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

TL; DR;

JSFiddle showing the problem

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

在Firefox上，滚动条位于正文或其中一个外部div上，容器根本不起作用。

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

更长的解释：

我们的应用程序在Chrome和IE10 +上运行良好，但在Firefox上，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. */

当我们声明要弯曲的东西时，这就是输出：

-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

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

嵌套的Flex容器在Firefox

2 个答案: