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 Editing It

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.
  • Zero (0) and positive numbers are the only values flex-shrink accepts.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Join CodeSweetly Newsletter