Что такое Flex-Shrink

Flex-shrink определяет, насколько flex-элемент может уменьшаться относительно других элементов, если не хватает места в контейнере. Значение по умолчанию — 1 (может сжиматься). Если 0 — элемент не сжимается. Чем больше значение, тем сильнее элемент сожмётся.

Пример:

.container {
  display: flex;
}

.item1 {
  flex-shrink: 2; /* Сожмётся в 2 раза сильнее, чем item2 */
}

.item2 {
  flex-shrink: 1;
}