The flex-wrap property, overflow of flex items

What happens if you add more flex items to a container than can fit in a single row?

• They will be shrunk to the smallest possible width.
• Even if you assign an explicit width to them, the flexbox mechanism can override this setting and reduce the width.
• If they can no longer be fit in a container after it is shrunk, they will overflow its boundaries, but they will continue to be placed in a single row.

This is somewhat similar to the behavior of cells in a table.

You can change this behavior using the flex-wrap flex container property. By default, it has the value nowrap, that is, the flex items may not overflow onto a new line.

The wrap value allows flex items to overflow onto a new line if they do not fit into a container.

Let’s see how this works in practice.