firefox flex滚动条不会增长

Question

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

在chrome中，如果您有

flex: 0 0 auto;
overflow: auto;

当y方向上有溢出时，它占了滚动条的额外宽度，并且一切都很好。但是在firefox中，它并不能解决额外的宽度，并且会使内容也沿x方向溢出。

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

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

Firefox：

铬：

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

编辑：flex-grow：1（1 1自动）可以解决此问题，使容器通过增长来响应周围的多余空间。如果您不希望元素增长并且仅与内部内容一样宽怎么办？

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