Справочник · CSS

flex-grow: кто забирает свободное место

Число говорит, какую долю свободной ширины или высоты получит элемент.

Как это работает

0 означает не расти. 1 позволяет занять всё свободное вдоль оси. Два соседа с 1 делят место поровну. Поле поиска часто растят, а кнопку оставляют по содержимому. Если элемент не сжимается из-за длинного слова, рост соседа не поможет: поставь min-width: 0 на ту колонку, которой нужно уметь сужаться.

.search { flex: 1; }
.button { flex: 0 0 auto; }

Когда использовать

Строка поиска и кнопка. Карточки одинаковой ширины проще отдать гриду, а не набору grow.

Частые ошибки

• Оба элемента с grow, и кнопка стала огромной.
• Поле не растёт, потому что у родителя не flex.
• Длинное слово не даёт колонке сжаться.