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:

CSS
HTML

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;
}

<section>
  <div class="flex-item1">1</div>
  <div class="flex-item2">2</div>
  <div class="flex-item3">3</div>
  <div class="flex-item4">4</div>
</section>

Try Editing It

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

Support CodeSweetly