Firefox和flexbox - 当使用white-space：nowrap on child元素时，灵活的框会中断

Question

在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，因为，我不希望它包装。这个单一属性使灵活的框中断并扩展以适合.left div。

的全部内容

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

Answer 1

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

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

Answer 2

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

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

Answer 3

这就是应该如何运作的。 Flexbox在计算元素的固有宽度之后将空间分布在空间上，它不控制元素本身的固有宽度。这就是为什么如果你没有在事物上设置明确的宽度，结果是unintuitive，尽管工作组正在审查规范。

我的建议是try using display: table; instead，但你可能会遇到类似的问题。