html - div 溢出容器并且没有断线

Question

我尝试让第 5 个 div 断线，因为它的容器是 100% 宽度而 div 有 24% 宽度

这是 html 代码，katalogue 作为容器，kotakproduk 作为我的意思的 div

<div className="katalogue">
    {produkbaru}
    <div className="kotakproduk">
        <div className="gambarproduk">
            <img src="" />
        </div>
        <div className="nama">
            Realme X2 PRO
        </div>
        <div className="harga">
            Rp. 1.700.000
        </div>
    </div>
</div>

.css 文件

.kotakproduk{
    width:24%;
    position:relative;
    margin-top: 2%;
    transition: transform .2s;
}
.gambarproduk{
    height: 85%;
    }
.katalogue{
    display:flex;
    width:100%;
}

并且第 5 个 div 从容器中溢出。提前致谢

Answer 1

将 flex-wrap: wrap 设置为 .katalogue div