Skip to content
Announcing the new Pro Zone. Check it out!

flex-shrink in CSS Flexbox – How to Shrink Flex Item

flex-shrink tells browsers how much the specified flexible item should shrink when the sum of all items’ sizes exceeds the flexbox’s size.

In other words, suppose the flexbox’s size is insufficient to fit the flexible items. In that case, browsers will shrink the items to fit the container.

Therefore, flex-shrink allows you to specify the shrinking factor of a flexible item.

Here’s an example:

section {
display: flex;
justify-content: flex-start;
background-color: orange;
margin: 10px;
width: 50%;
}
div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 10px;
border-radius: 5px;
width: 40%;
}
.flex-item3 {
flex-shrink: 0;
}

Try Editing It

We used the flex-shrink property to prevent browsers from shrinking flex-item3.