Use the flex-wrap Property to Wrap a Row or Column

CSS flexbox имеет функцию разделения гибкого элемента на несколько строк (или столбцов). По умолчанию контейнер flex будет соответствовать всем гибким элементам вместе. Например, строка будет находиться в одной строке. Однако, используя свойство flex-wrap , он сообщает CSS об обертке элементов. Это означает, что дополнительные элементы перемещаются в новую строку или столбец. Точка прерывания, в которой происходит обертка, зависит от размера элементов и размера контейнера. CSS также имеет опции для направления переноса:

• nowrap : это значение по умолчанию и не переносит элементы.
• wrap : обертывает элементы слева направо, если они находятся в строке или сверху вниз, если они находятся в столбце.
• wrap-reverse : обертывает элементы снизу вверх, если они находятся в строке или справа налево, если они находятся в столбце.

В текущем макете слишком много ящиков для одной строки. Добавьте свойство flex-wrap в элемент #box-container и придайте ему значение wrap.