我试图归档一个简单的侧边栏 |使用普通 float 视觉内容，然后我使用等高列的经典技术 (margin-bottom: -99999px; padding-bottom: 99999px etc) 但我不喜欢它，我有一些这里和那里的问题，所以我决定使用 flex-box，我前段时间用固定大小的宽度尝试过它并且工作正常但现在我有百分比宽度所以看起来 firefox 根本不喜欢它.. .
This示例显示了我通常期望 flex-box 工作的方式，它在 safari 和 chrome 中表现良好，但 firefox 只是忽略百分比宽度...我发现 it is a known issue firefox 的，但它是一个旧的，我认为他们已经解决了它......
然后我尝试了一些东西different为了欺骗 firefox，但它仍然不是我所期望的，因为侧边栏根据内容在页面之间具有不同的大小...
所以我最终放弃了具有流体布局的 flex-box，并使用了更简单的东西来满足我的需要...
但我很想知道是否有人通过任何变通方法解决了这个问题，或者我们是否都在等待 mozila 修复这个问题......
谢谢!
最佳答案
我强烈建议不要使用 margin-bottom: -99999px; padding-bottom: 99999px 解决方法。
如果您想要 14%、86% 拆分的流畅布局(我想这就是问题所在？)，只需使用普通的旧 CSS 而不是 Flex。
为什么要重新发明轮子。如果您正在寻找一种更好的网站布局方式，请尝试“网格”方法。
- 语义网格 (http://semantic.gs/)
- Bootstrap - (http://twitter.github.com/bootstrap/index.html)
这假定您出于某些特定原因不需要 flex，如果您这样做则忽略它 ;)。另外，在使用 CSS3 特定属性时要考虑向后兼容性!
关于css - Firefox 上具有百分比宽度的 Flexbox 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9565184/