Mastering CSS

Using flex-shrink

A flex-shrink can be thought of as the opposite of flex-grow. While flex-grow determines how much of the extra space a flex item should consume, proportionate to others when there is leftover space, flex-shrink determines how much the flex item itself should shrink proportionately to others when there isn't any leftover space. So, let's see this in action and step this out.

First, let's add flex-basis of 200px to each flex item and temporarily remove flex-grow:

.flex-container {  margin-top: 200px;  display: flex;}.flex-item {  padding: 20px;  flex-basis: 200px;}.flex-item2 { }

So if flex-basis is set to 200 pixels, each flex item will be 200 pixels wide and any extra space is not allowed in any of the flex items because