问Firefox中溢出的嵌套flex容器
EN

Stack Overflow用户

提问于 2015-08-17 06:42:43

回答 2查看 1.6K关注 0票数 2

我正在开发一个使用UI-路由器和许多嵌套视图的web应用程序。我们的主要视图使用Flex占据屏幕上的所有可用空间(包括高度和宽度)。我这么说是为了找出为什么我们有这么多嵌套的flex容器。

TL;DR;

JSFiddle显示了这个问题

在IE和Chrome上，下面的JSFiddle就像你所期望的那样工作。所有外部div都适合于页面，而最内部的div有一个滚动条来显示溢出的内容。

在Firefox上，滚动条位于主体上，或者是外部div中的一个，容器根本无法工作。

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

更长的解释：

我们的应用程序在Chrome和IE10+上运行得很好，但在火狐上，flex容器似乎也不像我们所需要的那样工作。我们的意图是让最低的弹性容器有溢出自动，其余的只是适合屏幕没有滚动条。

我试图确保我们使用的是所有跨浏览器的flex前缀，所以当我们声明一个flex容器(使用更少的混合器)时，结果如下：

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要么根本不包含它，要么将滚动条放在最外层的容器上。看上去火狐一点也不尊重柔韧。

我需要所有浏览器的一致行为，有什么想法吗？这需要一个纯粹的css解决方案，因为我对这个项目太深入了，无法改变HTML结构。

JSFiddle显示了这个问题

更新

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

这里有两个额外的花招，我认为更好地表达了这些场景。

使用flex: 1;

用于flex 1的JSFiddle

您会注意到，这在IE11和Chrome中非常有用，但是可以在火狐上使用。

使用flex: auto;

JS Fiddle用于flex汽车

这在任何事情上都行不通..。

html

css

flexbox

语音识别特惠活动

语音识别准确率高、用于会议内容转写、客服质检等场景，助力企业将本增效

回答 2

Stack Overflow用户

发布于 2015-08-17 06:59:40

把你所有的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;
}