我遇到了一个特定于firefox(afaik)的问题.

如果你有铬合金

flex: 0 0 auto;
overflow: auto;

当y方向溢出时,它会占据滚动条的额外宽度,一切都很好.但是在Firefox中,它没有考虑额外的宽度,它也使内容在x方向上溢出.

我准备了一支笔来演示这个问题：

https://codepen.io/anon/pen/JEMyPm

火狐：

铬：

任何建议/解决方法都会很棒！

编辑：flex-grow：1(1 1 auto)可以解决问题,使容器通过增长来响应周围的额外空间.如果您不希望元素增长并且只与内部内容一样宽,该怎么办？

最佳答案 请使用flex：1 1 auto而不是0 0 auto,因为它根据宽度/高度属性调整项目大小,但使其完全灵活,以便沿主轴吸收任何额外空间.定义如下：

.child {  
   flex: 1 1 auto;  
   width: 50px;  
   height: 50px;
   background: #000;
   color: #fff;  
   margin: 8px;  
   text-align: center;  
   line-height: 50px;  
   border: 3px solid #4d4d50;   
   border-radius: 2px; 
}