Firefox上具有百分比宽度的Flexbox不起作用答案

【问题标题】：Flexbox with percentage width on firefox not workingFirefox上具有百分比宽度的Flexbox不起作用
【发布时间】：2012-03-22 20:07:26
【问题描述】：

我尝试归档一个简单的侧边栏 |用普通的浮点数在视觉上显示内容，然后我使用经典的等高列技术（margin-bottom: -99999px; padding-bottom: 99999px 等），但我不喜欢它，我在这里和那里遇到了一些问题，所以我决定使用 flex-box，我前段时间用固定大小的宽度试过它，它工作得很好，但现在我有百分比宽度，所以似乎 Firefox 根本不喜欢它......

This 示例显示了我通常期望 flex-box 工作的方式，它在 safari 和 chrome 中运行良好，但 firefox 只是忽略百分比宽度...我发现 firefox 的 it is a known issue 但它是旧的我以为他们已经解决了...

然后我尝试了一些different 来欺骗firefox，但它仍然不是我所期望的，因为侧边栏根据内容在页面之间具有不同的大小......

所以我最终放弃了具有流畅布局的 flex-box，并使用了更简单的东西来满足我的需求......

但我很想知道是否有人通过任何解决方法解决了这个问题，或者我们是否都在等待 mozila 解决这个问题......

谢谢！

【问题讨论】：

仿列可能是一个解决方案？ alistapart.com/articles/fauxcolumns
它几乎与margin/padding -bottom -/+ 99999px 相同，因此您可以看到列具有相同的高度，但实际上它们没有，flexbox 和 table真正的等高技术，但我所描述的问题与等高列无关，而是与火狐在 flex 框中时忽略百分比宽度的事实有关。

标签： css css-float tablelayout flexbox

【解决方案1】：

我强烈建议不要使用margin-bottom: -99999px; padding-bottom: 99999px 解决方法。如果你想要一个流畅的布局（我想这就是问题所在？），拆分为 14% 和 86%，只需使用普通的旧 CSS 而不是 Flex。

http://jsfiddle.net/97dtV/7/

为什么要重新发明轮子。如果您正在寻找更好的网站布局方式，请尝试“网格”方法。

语义网格 (http://semantic.gs/)
引导程序 - (http://twitter.github.com/bootstrap/index.html)

这假设您出于某种特定原因不需要 flex，如果您这样做，则忽略它;)。另外，在使用 CSS3 特定属性时要考虑向后兼容性！

【讨论】：

-/+99999px 方法的问题是我需要有带有position:absolute 的侧边栏，这是我需要避免的。
hmm 我可以有类似this 的东西。老实说，我目前使用this 方法，到目前为止我对此很满意......但谢谢你的回答！
只要你的列高度不同，就使用普通的旧 CSS falls apart。这就是人们使用 -/+9999px 方法、flexbox 或 css 表的原因。语义网格方法可能是最好的选择，但遗憾的是 Firefox 中的 flexbox 如此糟糕。