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.

A new way to learn and to build for the web

Get the best, coolest, and latest in design and no-code delivered to your inbox each week.

Shoot, something didn't work. Try again later, bud.