За что отвечают свойства flex-grow и flex-shrink в CSS

Что проверяют

Понимаете ли вы, как распределяется свободное место в контейнере, и знаете ли ловушку с минимальным размером, из-за которой элементы отказываются сжиматься.

Как отвечать

Оба свойства описывают поведение элемента, когда размеры контейнера и содержимого не совпадают.

flex-grow отвечает за рост: если после раскладки остаётся свободное место, оно делится между элементами пропорционально их значениям. При 0 элемент не растёт вовсе.

flex-shrink отвечает за сжатие: если места не хватает, недостаток вычитается пропорционально значениям с учётом базового размера элемента. По умолчанию он равен 1, поэтому элементы сжимаются; 0 запрещает сжатие.

Третье свойство пары это flex-basis, стартовый размер до распределения. Их обычно пишут сокращённо:

.sidebar { flex: 0 0 280px; }   /* не растёт, не сжимается, ширина фиксирована */
.content { flex: 1 1 auto; }    /* забирает остаток и сжимается при нехватке */

Что стоит добавить обязательно: у флекс-элементов min-width по умолчанию равен auto, а не нулю. Поэтому длинный текст или таблица внутри не дают элементу сжаться, и появляется горизонтальная прокрутка. Лечится min-width: 0 на сжимаемом элементе, и это самая частая практическая ловушка флексбокса.

Полезно упомянуть, что flex: 1 разворачивается в 1 1 0%, что не то же самое, что 1 1 auto: в первом случае содержимое не влияет на распределение, во втором влияет.

Где спотыкаются

Задают ширину через width и не понимают, почему она игнорируется: её перебивает flex-basis.

Ловят переполнение из-за min-width: auto и лечат это overflow: hidden, теряя часть содержимого.

Считают, что flex-grow: 2 даёт вдвое большую ширину. Он даёт вдвое большую долю свободного места, а не всей ширины.