Flex shrink css что это?

Мне достаточно запретить сжатие одной иконке.

Одинаковый flex-shrink не означает одинаковое уменьшение в пикселях. При распределении отрицательного свободного места коэффициент сжатия умножается на базовый размер элемента. Если первый пустой элемент имеет базу 200px, второй 100px, а оба имеют shrink: 1, их веса сжатия относятся как два к одному. Когда в контейнере не хватает 60px, в упрощенном случае без отступов и ограничений первый потеряет 40px, а второй 20px. Итог получится 160px и 80px. Именно такое поведение вы и наблюдаете. Значение ноль запрещает элементу участвовать в этом сжатии, но не гарантирует, что вся строка поместится: лишняя ширина может перейти в переполнение, если остальные элементы не способны уменьшиться достаточно. Для фиксированной пиктограммы рядом с текстом можно задать flex-shrink: 0 на пиктограмме, а текстовому элементу разрешить сжатие и при необходимости установить min-width: 0. После этого отдельно определите, как текст переносится или сокращается. Свойство не управляет переносом flex-элементов на следующую строку: это задача flex-wrap у контейнера. Оно не заменяет flex-basis, который задает отправную точку расчета, и не распределяет избыток свободного места, которым занимается grow. Реальные размеры могут отличаться от простой формулы из-за min-width, max-width, содержимого, padding и border. Поэтому сначала проверяйте понятный пример без этих факторов, затем возвращайте оформление по частям. В направлении column сжатие относится к главному вертикальному размеру, а не автоматически к ширине.

Теперь понял, коэффициент умножается на исходный размер.

Сжатие Flex-shrink задает участие элемента в распределении нехватки места по главной оси. Ноль запрещает такое сжатие, положительное число разрешает его.

Пропорция При расчете учитывается не только коэффициент, но и базовый размер. При базах 200px и 100px, одинаковом shrink:1 и нехватке 60px элементы без ограничений потеряют 40px и 20px соответственно.