By default, flexbox tries to fit
all the child elements in a single
row or a single column depending
on the flex-direction.
So, if the width of the flex items
exceeds the width of the parent
element, we will see a horizontal scrollbar.
To avoid this, we can choose to
wrap the elements pushing
them to the next row / column
using the flex-wrap property:
Try removing the flex-wrap
property to see the default
behaviour. The default value
is nowrap. You can also set
the value as wrap-reverse.
Try this out in the above editor
to see how it works.