Релевантные источники:
- developer.mozilla.org -> [flex-shrink](https://developer.mozilla.org/ru/docs/Web/CSS/flex-shrink)
> Данное свойство прописывается [[flex container и flex items|flex-элементу]]
`flex-shrink` — это свойство в CSS Flexbox, которое определяет, как [[flex container и flex items|flex-элемент]] должен сжиматься относительно других элементов внутри [[flex container и flex items|flex-контейнера]], когда доступное пространство уменьшается.
### Значения свойства
- **Положительное число (integer)**: Отрицательные значения недопустимы. Указывает коэффициент сжатия элемента. Чем больше значение, тем сильнее элемент будет сжиматься.
- **1**: (Значение по умолчанию) Элемент будет сжиматься пропорционально доступному пространству, деля его с другими элементами, имеющими такое же значение `flex-shrink`.
- **0**: Если указать значение `0`, то элемент не будет сжиматься, независимо от того, сколько доступного пространства требуется другим элементам в flex-контейнере. Он сохранит свою первоначальную ширину (или высоту, если flex-контейнер имеет вертикальную ориентацию).
### Синтаксис
```css
.child {
flex-shrink: 4;
}
```
### Интерактивная визуализация
<iframe src="https://interactive-examples.mdn.mozilla.net/pages/css/flex-shrink.html" width="100%" height="380px"></iframe>