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