如何删除出现在Firefox和IE上的flexbox中的水平滚动条

Question

因此，我尝试在一个网站上工作，但在Firefox和IE上，最后一部分包含3张图片，但水平水平溢出，而Chrome上却没有。 我将该article区域划分为一个flexbox，因此我认为它将处理溢出并调整其大小以适合Chrome似乎可以，但firefox和IE不能？ 我遇到的最后一节是.other 。 这是我的css设置初始布局以及与.other部分和article部分有关的css：

body {
  display: flex;
  flex-direction: column;
  width: 100%;
}
main {
  display: flex;
  flex-direction: row;
  flex: auto;
}
article {
  flex: 2;
  overflow-y: auto;
}
aside {
  flex: 1;
  overflow-y: auto;
}
article {
  display: flex;
  flex-direction: column;
}
.other {
  display: flex;
  flex-direction: row;
  margin-top: 70px;
  margin-bottom: 50px;
  align-items: center;
}
.fitness,
.education,
.pastimes {
  flex-shrink: 1;
}

http://173.246.106.179/test.html

Answer 1

也许您是为了我们的方便而将其剥离了..但是您是否在使用自动前缀器？ 如果不是，这可能就是为什么您在浏览器中看到不同的行为的原因。

display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */ 

如果您使用的是LESS，则有一个不错的flexbox mixin库https://gist.github.com/jayj/4012969

如果您要测试的浏览器尚不支持flexbox，也总是值得一看http://caniuse.com/#feat=flexbox 。 如果使用供应商前缀，则覆盖范围非常好。