New! My 44-page ebook "CSS in 44 minutes" is out! 😃
Defines how much a flexbox item should shrink if there's not enough space available.
If there's not enough space available in the container's main axis, the element will shrink by a factor of 1, and will wrap its content.
The element will not shrink: it will retain the width it needs, and not wrap its content. Its siblings will shrink to give space to the target element.
Because the target element will not wrap its content, there is a chance for the flexbox container's content to overflow.
Because the flex-shrink value is relative, its behaviour depends on the value of the flexbox item siblings.
In this example, the green item wants to fill 100% of the width. The space it needs is taken from its two siblings, and is divided in 4:
Share this CSS property
Share on Twitter
Share on Facebook