小编dho*_*ert的帖子

我们大量使用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行为的方法.

有关布局或如何更好地隔离问题的任何帮助表示赞赏.

我有一个基于响应百分比的网格使用flexbox创建使用基于百分比的边距.它在Chrome和Safari中运行良好.但是,除非在元素上设置了明确的高度,否则Firefox会折叠边距.有人知道解决方法吗？

我已经设置了一个jsfiddle来演示这里的问题:http:
//jsfiddle.net/x0eo3aeo/2/

HTML:

<div class="flexContainer">
    <div class="flexCol1">aaa</div>
    <div class="flexCol2"><div style="width:100px; background-color:yellow;">bbb</div></div>
    <div class="flexCol3"><div style="width:250px; background-color:pink;">Hello world, some long text here to make this element stay at 250px while splitting onto multiple lines.</div></div>
</div>

CSS:

.flexContainer {
    display: flex;
    width: 100%;
    flex-direction: row;
}
.flexCol1, .flexCol3 {
    flex: 1;
    background-color: green;
}

Firefox实际上就是我想要的.第1列和第3列均匀弯曲,直到第3列的宽​​度达到其子级的固定大小div,然后仅第1列弯曲.但是,在Chrome中,两列都继续平均弯曲,第3列的子内容溢出.

有没有办法以跨浏览器的方式实现Firefox风格的行为？