Qual propriedade seria recomendada para o conteúdo da página não ficar "vazando"? Nas quais utilizei no código a cima não obtive sucesso. Estou tentando manter este padrão de 3 quadrados por coluna da Imagem 1.
var containerBoxElement = document.querySelector('#app')
containerBoxElement.style.maxHeight = '570px';
containerBoxElement.style.minWidth = '1103px';
containerBoxElement.style.position = 'fixed';
containerBoxElement.style.float = 'left'
Cada click no botão "Gerar novo" um quadrado é gerado, em que o 4º fica "vazado", onde deveria ir para a próxima coluna.
btnCriar.onclick = function gerarQuadrado() {
var boxElement = document.createElement("div");
boxElement.setAttribute("class", "box");
boxElement.style.width = '180px';
boxElement.style.height = '180px';
boxElement.style.margin = '10px';
boxElement.style.backgroundColor = '#f00';
containerBoxElement.appendChild(boxElement);
}