Multi-line flex containers and flex-shrink

In all of the previously discussed examples, the flex container was a single line. This was appropriate, since the option to overflow flex items onto a new line is not enabled by default: flex-wrap: nowrap; is the default setting.

So, how can we grow and shrink items in a multi-line container using flex-wrap: wrap;?

The flex-shrink property works as expected in this container. However, we will not need to use it as frequently. After all, if there is not enough space in the line, the flex items will overflow onto a new line.

But if there are flex items with a basic size that is larger than the size of their flex container, then these items will be shrunk so that they can fit on a single line. This is probably the only case where flex-shrink can be used to do something useful in a multi-line container.