firefox flex не растет для прокрутки

Question

У меня возникла проблема с проблемой, характерной для firefox (afaik).

В хроме, если у вас есть

flex: 0 0 auto; 
overflow: auto; 

когда есть переполнение в направлении у, она учитывает дополнительную ширину полосы прокрутки и все в порядке. Но в firefox он не учитывает дополнительную ширину, и он также переполняет содержимое в направлении x.

Я приготовил ручку, демонстрирующую этот вопрос:

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

FireFox:

хром:

Любое предложение/обходные пути были бы замечательными!

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