7

在 Safari 或 Chrome 中查看这个 jsFiddle，然后在 Firefox 中查看：http: //jsfiddle.net/brandondurham/LRJhm/

它在 Webkit 中的样子：http: //cloud.smallparade.com/B4TE

它在 Firefox 中的样子：http: //cloud.smallparade.com/B53R

您会看到 Firefox 中的灵活框已损坏。两个盒子中较长的一个 ( .left) 将 css 属性white-space设置为，nowrap因为我不希望它换行。这个单一的属性使灵活的盒子打破并扩展以适应.leftdiv 的全部内容。

其他人看到这种行为吗？有修复吗？

4

3 回答 3

10

虽然我认为 robertc 接受的答案是正确的（这就是 box flex 应该如何工作的）。您可以通过将框的宽度显式设置为 0 来禁用他所说的“固有”宽度。这样，只考虑您指定的宽度分布。

这种行为可以解释，因为当您将所有框宽度设置为零时，所有宽度都将变为“剩余”，因此分布完全取决于您指定的内容。

于 2012-03-16T12:52:22.223 回答
6

在元素上设置width: 0，这将成为它的“首选宽度”，并使元素内的非换行文本项行为正确。

http://lists.w3.org/Archives/Public/www-style/2011Jan/0201.html

于 2012-11-20T07:57:14.100 回答
2

这就是它应该如何工作的方式。Flexbox 在计算完元素的固有宽度后分配剩余空间，它不控制元素本身的固有宽度。这就是为什么如果你没有为事物设置明确的宽度，结果是不直观的，尽管工作组正在审查规范。

我的建议是尝试使用display: table;instead，尽管您可能会遇到一些类似的问题。

于 2011-10-19T14:23:27.320 回答