Flexbox 内容在 Firefox 中溢出答案

【问题标题】：Flexbox content spills over in FirefoxFlexbox 内容在 Firefox 中溢出
【发布时间】：2014-05-28 21:10:32
【问题描述】：

我不确定我做错了什么，但出于某种原因，Firefox 不会像 Safari 和 Chrome 那样根据其内容调整我的 Flexbox 简介的高度。

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/

页面的大体布局是这样的：

对于 Safari 和 Chrome，代码没有任何问题，呈现如下：

但对于 Firefox，高度基于右侧的列，如下所示：

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

【问题讨论】：

对于我来说，FireFox v28 中的 JSFiddle 中的内容不会溢出。我看不到过去的two banana，也无法滚动。
^ 那是内容溢出，特别是因为列表在 Safari / Chrome 上是完整的（直到九个香蕉）。 Blurb 没有设置固定高度，因此它不会在侧面添加滚动条。然而，图片库可以（overflow-x，并且可以正常工作），但 Blurb 没有正确保存其内容。
溢出只是你说溢出的方式，不是吗？如果是这样，那么不，它不在FF28中。它切断；溢出被隐藏。

标签： html css firefox

【解决方案1】：

看起来主要问题归结为 CSS 的“模糊”块中的几行代码。具体来说，您的 flex/-webkit-flex 行：

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

flex 的最后一个参数是“flex-basis”，显然 Firefox 和 Chrome/Safari 对它的处理方式略有不同。如果您检查“blurb”元素之一并查看 Chrome 和 Firefox 中的计算样式，您会看到浏览器将值解释为“0px”。问题是，虽然 Chrome 期待“0px”，但 Firefox 却没有。 Firefox 期待“0%”（这与 0px 不完全相同）；烦人的是，如果你使用“flex: 3 0 0%”，虽然它会为 Firefox 修复它，但它也会破坏 Chrome 和 Safari 的显示。看起来当 Chrome 和 Safari 试图用 0px 做正确的事情时，Firefox 正在更接近标准。当它看到“0px”时，它会尝试使简介框尽可能小，从而导致文本重叠。

如果您在 flexbox 规范 (http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/) 中搜索“flex-basis”，您可以找到更多关于它的详细信息以及一些关于 0px 与 0% 的讨论。

但是，除了提供 flex-basis 数字之外，您还可以使用“auto”，它会根据元素的 size 属性调整元素的大小（它本身可以是关键字 auto，根据元素的内容调整元素大小） " (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/

如果您想阅读更多内容，请点击链接：

【讨论】：

这正是我要找的！这些链接也非常有帮助。谢谢！ :)