Приведите пример использования flex-grow, flex-shrink и flex-basis

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

Понимаете ли вы, что эти три свойства описывают распределение не всей ширины, а свободного места, и знаете ли значения по умолчанию. Вопрос отсеивает тех, кто верстает флексы подбором значений, пока не станет похоже на макет.

Как отвечать

Объясните по шагам. Сначала браузер берёт flex-basis как стартовый размер элемента по главной оси, дальше сравнивает сумму этих размеров с размером контейнера. Если место осталось, излишек делится пропорционально flex-grow. Если не хватило, нехватка отнимается по flex-shrink.

.sidebar { flex: 0 0 240px; }
.content { flex: 1 1 0; }

Обязательно назовите значения по умолчанию: у элемента flex: 0 1 auto, то есть он не растёт, сжимается и стартует от своего содержимого или от width. Сокращения полезно знать наизусть: flex: auto это 1 1 auto, flex: none это 0 0 auto, а flex: 1 разворачивается в 1 1 0%.

Последний пункт стоит проговорить отдельно, это любимое уточнение. При базе 0 элементы делят между собой всю ширину контейнера и получаются равными. При flex-grow: 1 с базой auto они сначала занимают место под содержимое и делят поровну только остаток, поэтому колонка с длинным текстом окажется шире соседней.

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

Ждут, что flex-shrink: 1 у всех даст одинаковое сжатие. Сжатие взвешивается базой: элемент с большей базой отдаёт больше пикселей, иначе маленькие элементы схлопывались бы в ноль раньше крупных.

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

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