Question

我不确定我在这里做错了什么，但出于某种原因，Firefox并没有根据Safari和Chrome的内容调整我的Flexbox模糊高度。< / p>

Blurb基本上是我布局中的不同框。在您说什么之前，我还尝试将其切换回div图层，但它仍然无效。

Blurb的基本代码如下：

blurb {
display: block;
height: auto;
margin: 5px;        
padding: 10px;  
background: #fffeee;
-webkit-flex: 3 0 0;
    flex: 3 0 0;
}

这是我的代码： http://jsfiddle.net/HenQ8/1/

页面的总体布局如下：

General Layout

对于Safari和Chrome来说，代码没有任何问题，它可以像这样呈现：

Safari and Chrome

但是当谈到Firefox时，高度基于右侧的列，如下所示：

enter image description here

知道我做错了什么，或者我应该添加到blurb中，以便它包含自己的内容而不是溢出？提前谢谢！

Answer 1

看起来主要的问题归结为你的＆＃39; blurb＆＃39; CSS块。具体来说，你的flex / -webkit-flex行：

flex: 3 0 0;
-webkit-flex: 3 0 0;

flex的最后一个参数是＆＃34; flex-basis，＆＃34;显然，Firefox和Chrome / Safari之间的处理方式略有不同。如果你检查一个＆＃39; blurb＆＃39;元素并查看Chrome和Firefox中的计算样式，您会发现浏览器将值解释为＆＃39; 0px。＆＃39;问题是，虽然Chrome期待＆＃39; 0px，＆＃39; Firefox不是。 Firefox期待＆＃39; 0％＆＃39; （这与0px不完全相同）;令人讨厌的是，如果你要使用＆＃34; flex：3 0 0％，＆＃34;虽然它会为Firefox修复它，但它也会破坏Chrome和Safari的显示效果。看起来Chrome和Safari试图用0px做正确的事情，Firefox正在贴近标准。当它看到＆＃39; 0px时，＆＃39;它试图使模糊框尽可能小，导致文本重叠。

如果您通过flexbox规范（http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/）搜索＆＃34; flex-basis＆＃34;你可以找到一些关于它的更多细节以及对0px和0％的一些讨论。

然而，您可以使用＆＃34; auto＆＃34;而不是提供基于弹性的数字。根据它的大小属性（它本身可以是关键字auto，根据其内容调整元素大小）来调整元素大小＆＃34;＆＃34; （http://css-tricks.com/almanac/properties/f/flex-basis/）。在我的测试中，这解决了Firefox，Chrome和Safari中的显示问题。

带有更改的示例CSS块：

blurb {
    display: block;
    outline: 2px solid red;
    margin: 5px;
    padding: 10px;  
    background: #fffeee;
    -webkit-flex: 3 0 auto;
    flex: 3 0 auto;
}

小提琴示例： http://jsfiddle.net/blake770/85McA/2/

如果您想要更多阅读链接：

Flexbox内容在Firefox中蔓延

1 个答案: