html - firefox flex 不会因滚动条而增长

Question

我遇到了 firefox 特有的问题 (afaik)。

如果你有 chrome

flex: 0 0 auto;
overflow: auto;

当y方向有overflow的时候，就占了scrollbar的额外宽度，一切正常。但在 Firefox 中，它不考虑额外的宽度，它也会使内容在 x 方向溢出。

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

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

火狐:

Chrome :

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

编辑: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; 
}