div overflowing the container and didn't break line

i try to make the 5th div break the line because its container are 100% width and the div got 24% width

here is the html code, katalogue as the container and kotakproduk as the div i meant

<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 file

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

and the 5th div overflowing from container. thanks in advance