如何解决Firefox和Chrome之间的Flexbox格式差异

Question

我想使用用户样式表更改侧边栏元素的顺序（无法访问更改html或脚本）。

我使用Stylish CSS添加display：flex;容器div和order：对于要移动的孩子而且在FF中它完美地工作但在Chrome中相同的CSS格式非常不同。

我已将问题缩减为一行

如果我将样式.sidebar { display:flex; flex-direction: column; }应用于网站http://www.tripadvisor.co.uk/ShowForum-g1-i12105-TripAdvisor_Support.html，我会得到我期望并希望使用Firefox（31.0）的结果：

但是使用Chrome（36.0），格式完全不同：

为什么两个浏览器处理同一页面的方式如此不同？ 要使Chrome的格式与Chrome相同，需要做些什么？

添加显式高度：在Chrome中有所不同，但每个子div仍然被截断，因为我不知道子元素的数量或大小，这不是一个实际的解决方案

Answer 1

我发现侧边栏子元素上指定的其中一个类有一些非显而易见的原因{FF}似乎忽略了flex {+ 1}}属性以及Chrome正在使用的格式。格式化flexbox的列。

对容器和子元素更改为height:100%;似乎解决了我的问题，我可以根据需要重新排序子项