Skip to main content

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 it on StackBlitz

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

note
  • Browsers will not shrink flexible items with a flex-shrink value of 0.
  • flex-shrink's default value is 1.
Buy your CSS Flexbox Explained Visually book on Amazon