如何解决 Firefox 和 Chrome 之间的 flexbox 格式差异答案

【问题标题】：How to resolve flexbox formatting differences bewtween Firefox and Chrome如何解决 Firefox 和 Chrome 之间的 flexbox 格式差异
【发布时间】：2014-09-23 21:04:21
【问题描述】：

我想使用用户样式表更改侧边栏元素的顺序（无权更改 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 仍会被截断，而且由于我不知道子元素的数量或大小，这不是一个实用的解决方案

【问题讨论】：

因为chrome比firefox多1个topic

标签： css google-chrome firefox flexbox

【解决方案1】：

我发现 Sidebar 子元素上指定的类之一有一些不明显的原因 height:100%; 属性，FF 似乎忽略了弹性框和普通列格式，但 Chrome 在格式化时使用了该属性flexbox 列。

将容器和子元素更改为 height:auto; 似乎已经解决了我的问题，并且我可以根据需要对子元素重新排序

【讨论】：