Что такое flex-shrink?

flex-shrink отвечает за flex-элемент, когда места не хватает. Если контейнер уже, чем сумма базовых размеров его детей, браузеру нужно забрать лишние пиксели. flex-shrink помогает решить, у каких элементов и сколько места забрать.

Короткий ответ на интервью может звучать так:

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

Не останавливайтесь на определении. Добавьте практический риск. Свойство не гарантирует, что элемент реально ужмется до любого размера. На итог влияют flex-basis, min-width, min-height и содержимое.

flex-shrink включается, когда свободное место отрицательное. Проще говоря, flex-элементы вместе хотят занять больше места, чем есть в контейнере.

Упрощенная логика такая:

1. Браузер берет базовые размеры flex-элементов.
2. Сравнивает их сумму с размером контейнера по главной оси.
3. Если места не хватает, распределяет недостающие пиксели между элементами.
4. Для каждого элемента учитывает не только flex-shrink, но и его базовый размер.
5. Потом применяет ограничения минимального и максимального размера.

Поэтому фраза "у первого flex-shrink: 2, значит он всегда сожмется ровно в два раза сильнее второго" слишком грубая. Если базовые размеры разные, итоговая потеря пикселей считается не только по коэффициенту.

Обычно не нужно расставлять разные значения flex-shrink везде. В большинстве интерфейсов хватает дефолтного 1 для контента, который можно ужать, и 0 для элементов, которые должны сохранить размер.

Частый кейс выглядит так. Слева аватар, рядом длинное имя, справа кнопка. Аватар и кнопка не должны сжиматься. Текст должен занять остаток и обрезаться.

.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 320px;
}

.avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.action {
  flex-shrink: 0;
}

Здесь .avatar и .action защищены от сжатия. .name может сжиматься, но ключевая деталь в min-width: 0. Без нее длинный текст может выталкивать кнопку за пределы контейнера. Если имя важно для выбора действия, не оставляйте только обрезанную строку. Дайте пользователю способ увидеть полный текст, например в раскрытии карточки или в доступной подписи рядом с действием.

Эти три свойства отвечают за разные части одной модели:

• flex-basis задает базовый размер до распределения свободного места.
• flex-grow распределяет лишнее место, когда контейнер шире нужного.
• flex-shrink распределяет нехватку места, когда контейнер теснее нужного.

На практике часто используют shorthand flex. Важно помнить, что он меняет несколько значений сразу. Например, когда вы пишете flex: 1, вы не просто включаете рост. Вы также получаете определенное поведение для shrink и basis. Если верстка внезапно изменилась, проверьте итоговые computed styles.

В ответе на собеседовании держите простой порядок. Что делает свойство, когда оно включается, чем ограничивается и где может сломать UI.

Хорошая короткая версия:

flex-shrink управляет тем, как flex-элемент уменьшается по главной оси, когда контейнеру не хватает места. Значение 1 стоит по умолчанию, 0 запрещает сжатие. При этом итог зависит от flex-basis и минимального размера контента, поэтому для длинного текста в flex часто нужен min-width: 0, иначе можно получить overflow.

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