firefox flex不会为滚动条增长

Question

我遇到了特定于firefox（afaik）的问题。

在Chrome中，如果您有

flex: 0 0 auto; 
overflow: auto; 

时存在溢出y方向，它占的滚动条的特宽幅，一切都很好。但在Firefox中，它没有考虑到额外的宽度，它也使得内容在x方向上溢出。

我已经准备演示此问题笔：

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

火狐：

铬：

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

编辑：flex-grow：1（1 1 auto）可以解决这个问题，这使得容器通过增长来响应它周围的额外空间。如果你不想让元素增长并且只与内容一样宽泛呢？

Answer 1

请使用flex: 1 1 auto而不是0 0 auto，因为它根据它的width/height属性来确定项目的大小，但是它使得它非常灵活，因此它们可以吸收主轴上的任何额外空间。定义如下：

.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; 
}