flex-wrap

When the number of items in a row does not fit the length of the container, they try to move to the next row. You can use flex-wrap to control how those child elements wrap inside the container.

flex-wrap:no-wrap this is the default value and elements will fit a single line.

flex-wrap:wrap fits on to multiple lines.

flex-wrap:wrap-reverse This will fit multiple lines if necessary. But here, it starts from bottom to top.

The default value of the flex-wrap is nowrap so all the child elements try to fit into one line. But you can change the child elements to wrap to the next line