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:

• 3 quarters are taken from the red item
• 1 quarter is taken from the yellow item