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格从容器溢出。在此先感谢

Answer 1

将flex-wrap: wrap