Что происходит с дочерними элементами, если их суммарная ширина превышает ширину контейнера, а у одного из элементов задано flex-shrink: 0?

Как работает flex-shrink в CSS Flexbox

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

Пример поведения

Рассмотрим контейнер шириной 300px с тремя дочерними элементами по 150px каждый. Суммарная ширина — 450px, что на 150px больше контейнера. Если у одного элемента flex-shrink: 0, он останется 150px, а остальные два будут сжиматься, чтобы компенсировать переполнение. Если сжатия недостаточно, элемент с flex-shrink: 0 может выйти за границы контейнера.

.container {
  display: flex;
  width: 300px;
}
.item {
  width: 150px;
}
.item.no-shrink {
  flex-shrink: 0;
}

Применение на практике

Это свойство полезно, когда нужно зафиксировать размер определённого элемента, например, иконки или кнопки, чтобы они не сжимались при изменении ширины контейнера. Остальные элементы будут адаптироваться, занимая оставшееся пространство.

Вывод: Используйте flex-shrink: 0, когда элемент должен сохранять свою ширину независимо от переполнения контейнера, а остальные элементы пусть сжимаются.