Skip to content
Latest: The updated version of the Creating NPM Package (React JavaScript) book is 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.