Firefox 和 flexbox - 当在子元素上使用 white-space: nowrap 时，flexbox 会中断答案

【问题标题】：Firefox and flexbox - When using white-space: nowrap on child element the flexible box breaksFirefox 和 flexbox - 当在子元素上使用 white-space: nowrap 时，flexbox 会中断
【发布时间】：2011-12-10 10:58:21
【问题描述】：

在 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的全部内容。

其他人看到过这种行为吗？有解决办法吗？

【问题讨论】：

标签： css flexbox

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：