CSS flex-shrink

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items in the flex container when there is not enough space on the main axis.

The flex-shrink property takes a unitless number as a value, which determines how much the flex item can shrink. A value of 0 means the item will not shrink, while a value greater than 0 will determine the proportion in which the item will shrink relative to other flex items.

Let's look at an example to better understand how flex-shrink works:

In this example, we have a flex container with three flex items. Each item has a flex-shrink value set. As the container size reduces, the items will shrink according to their flex-shrink value.

Let's apply the flex-shrink property to our example:

.flex-container {
  display: flex;
}

.flex-item {
  flex: 1 1 auto;
  width: 100px;
}

.item1 {
  flex-shrink: 1; 
}

.item2 {
  flex-shrink: 2; 
}

.item3 {
  flex-shrink: 0; 
}

Now let's see the code in action:

In this example, when there is not enough space on the main axis, Item 1 will shrink at a normal rate, Item 2 will shrink at double the rate of Item 1, and Item 3 will not shrink at all due to its flex-shrink: 0 value.