As you already learned, the
flex-grow property specifies how items grow (or expand) to fill the available space in the flex-container. The
flex-shrink property specifies how items behave when there’s not enough space available for all of them to fit.
The default value for
flex-shrink is 1. This means that all items shrink in an equal proportion.
Let’s demonstrate these concepts with an example.