The flex-shrink CSS property defines how much an element shrinks relative to other flexible items inside the same parent element. It determines how much an item in a flex parent should be reduced when the available space is less than the combined size of all the items. 

The command “flex-shrink: <number>” specifies the proportion of reduction. The value must be positive — the higher the number, the more it shrinks. 

For example, if a flex container is 300 pixels wide and has three items with a value of 1 and widths of 100 pixels, it has enough space to fit all three items. If the flex parent shrinks to 250 pixels, the items will overlap. Using “flex-shrink,” the items reduce in size, and the flex parent can fit all three. Here’s what the code looks like:

.container {

display: flex;


.item {

flex-shrink: 1;


Flex-shrink gives designers more flexibility over space, organization, and appearance, enabling various layouts and items to adapt to different devices and screen sizes.

Visit Webflow University for in-depth lessons on flexbox and all things CSS to customize your website.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more