我们大量使用flexbox用于桌面应用程序,例如查看Web应用程序,它一直很好用.
但是使用最新的Firefox Developer Edition(35.0a2),布局的行为并不像预期的那样(它超出了视口):http://tinyurl.com/k6a8jde
这在Firefox 33.1中运行良好.
我认为这与此处描述的flexbox更改有关:https: //developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility
但遗憾的是,我还无法找到在FF 34或35.x中获得FF 33.x行为的方法.
有关布局或如何更好地隔离问题的任何帮助表示赞赏.
dho*_*ert 73
相关的区别在于"弹性项目的隐含最小尺寸",这是flexbox规范中的一项新功能.(或者更确切地说,删除并重新引入的功能)
恢复旧行为的最简单(最简单)方法是添加此样式规则:( * { min-height:0 }或者min-width,如果您担心水平flexbox中的溢出;但看起来您的测试用例只有从垂直Flex容器溢出时出现问题).
随着这一变化更新了小提琴:http: //jsfiddle.net/yoL2otcr/1/
实际上,您应该只需要设置min-height:0特定元素 - 特别是,您需要在每个元素上:
是一个'列'导向的灵活容器的孩子
你有一个高大的后代,你想要允许溢出(这可能由一个带有"overflow:scroll"的中间元素优雅地处理,就像这里的情况一样)
(在你的情况下,实际上有一堆嵌套的这些元素,因为你在许多嵌套的flex容器中有一个高大的元素.所以min-height:0,不幸的是,你可能需要一直向上.)
(如果您感到好奇,这个错误包含更多信息以及由于此规范更改而在网络上被破坏的更多内容示例:https://bugzilla.mozilla.org/show_bug.cgi？id = 1043520)
| 归档时间： |
|
| 查看次数： |
15808 次 |
| 最近记录： |