javascript - 如果将 div 推到容器外，您如何做到这一点？

Question

我正在尝试编写一些代码，将字符串转换为每个字母的 div 框，但是如果我让它们超过容器宽度，div 会被推到一起，如果相反，它们被放在一起，我会喜欢它底部并开始另一行这是代码

function display(string) {
    var x = []
    for(var m = 0; m < string.length;m++) {
        x.push(string[m])
    }
    x.forEach(function(e) {
        document.querySelector(".scene").innerHTML += 
            "<div class=" + e +"></div>"
	});
}
display("abab")

.scene {
    display: flex;
    width: 150px;
}
.a {
    width: 50px;
    height: 50px;
    background: black;
}
.b {
    width: 50px;
    height: 50px;
    background: red;
}
div {
    display: inline-block;
}

<div class='scene'></div>

Answer 1

function display(string) {
    var x = []
    for(var m = 0; m < string.length;m++) {
        x.push(string[m])
    }
    x.forEach(function(e) {
        document.querySelector(".scene").innerHTML += 
            "<div class=" + e +"></div>"
	});
}
display("abab")

.scene {
    display: flex;
    flex-wrap: wrap;
    width: 150px;
}
.a {
    width: 50px;
    height: 50px;
    background: black;
}
.b {
    width: 50px;
    height: 50px;
    background: red;
}
div {
    display: inline-block;
}

<div class='scene'></div>