Currently faced with a perplexing issue where inserting elements into a div causes scaling problems, resulting in most of the divs being cut off. This glitch occurs when two new elements are added.

Despite changing page sizes and thoroughly debugging by outputting various prints to isolate the cause, I'm unable to comprehend why this functionality suddenly fails?

View without 4 new elements: https://i.sstatic.net/6BpIu.png

View with 4 new elements: https://i.sstatic.net/IhOTz.png

JSON Structure:

            var Product = {
                Name: Name,
                BuyPrice: BuyPrice,
                SellPrice: SellPrice,
                ProfitMargin: ProfitMargin,
                Demand: Demand,
                Volume: Inflation,
            }

Javascript Code:

            var Product = ProfitDescending[i]

            var Product = ProfitDescending[i]
            var Div = document.createElement("div")
            Div.id = Product.Name
            Div.className = "Product"
            document.getElementById("Products").appendChild(Div)

            var NameText = document.createElement("h1")
            NameText.id = "NameText"
            NameText.textContent = FixName(Product.Name)
            document.getElementById(Product.Name).appendChild(NameText)

            var ProfitMarginText = document.createElement("p")
            ProfitMarginText.id = "ProfitText"
            ProfitMarginText.textContent = "Profit: " + AbbreviateNumber(parseInt(Product.ProfitMargin),1)
            document.getElementById(Product.Name).appendChild(ProfitMarginText)

            var BuyPriceText = document.createElement("p")
            BuyPriceText.id = "BuyPriceText"
            BuyPriceText.textContent = "Buy Price: " + AbbreviateNumber(parseInt(Product.BuyPrice),1)
            document.getElementById(Product.Name).appendChild(BuyPriceText)

            var SellPriceText = document.createElement("p")
            SellPriceText.id = "SellPriceText"
            SellPriceText.textContent = "Sell Price: " + AbbreviateNumber(parseInt(Product.SellPrice),1)
            document.getElementById(Product.Name).appendChild(SellPriceText)

            //Adding 4 new elements below (Previous part functions fine)

            var DemandTitleText = document.createElement("h1")
            DemandTitleText.id = "DemandTitleText"
            DemandTitleText.textContent = "Demand:"
            document.getElementById(Product.Name).appendChild(DemandTitleText)

            var DemandText = document.createElement("p")
            DemandText.id = "DemandText"
            DemandText.textContent = Product.Demand
            DemandText.style.color = Colors[Product.Demand][0]
            document.getElementById(Product.Name).appendChild(DemandText)

            var VolumeTitleText = document.createElement("h1")
            VolumeTitleText.id = "VolumeTitleText"
            VolumeTitleText.textContent = "Volume:"
            document.getElementById(Product.Name).appendChild(VolumeTitleText)

            var VolumeText = document.createElement("p")
            VolumeText.id = "VolumeText"
            VolumeText.textContent = Product.Demand
            VolumeText.style.color = Colors[Product.Volume][0]
            document.getElementById(Product.Name).appendChild(VolumeText)

CSS Style:

body {
    background-color: rgb(40, 40, 40);
    overflow-x: hidden;
    height: 20000px;
}

#Logo {
    width: 250px;
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1;
}

#AngledDiv {
    position: absolute;
    width: 120%;
    left: -50px;
    top: -50px;
    height: 620px;
    transform: rotate(-2deg);
    background-color: rgb(50, 50, 50);
}

#Products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    overflow: hidden;
    position: absolute;
    width: 1200px;
    height: 20000px;
    top: 430px;
    left: 50%;
    margin-left: -600px;
}

.Product {
    background-color: rgb(60, 60, 60);
    border-radius: 5px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)!important;
}

#NameText {
    position: relative;
    font-weight: 600;
    top: -15px;
    left: 10px;
    font-family: Montserrat,system-ui;
    font-size: 26px;
    color: #FFAA00;
}

#ProfitText {
    position: relative;
    margin-top: -15px;
    left: 10px;
    font-family: Montserrat,system-ui;
    font-weight: 450;
    font-size: 24px;
    color: white;
}

#BuyPriceText {
    position: relative;
    margin-top: -20px;
    left: 10px;
    font-family: Montserrat,system-ui;
    font-weight: 450;
    font-size: 24px;
    color: rgb(180, 180, 180);
}

#SellPriceText {
    position: relative;
    margin-top: -28px;
    left: 10px;
    font-family: Montserrat,system-ui;
    font-weight: 450;
    font-size: 24px;
    color: rgb(180, 180, 180);
}

#DemandTitleText {
    position: relative;
    font-weight: 350;
    top: -15px;
    left: 10px;
    font-family: Montserrat,system-ui;
    font-size: 26px;
    color: white;
}

#DemandText {
    position: relative;
    font-weight: 350;
    top: -74px;
    left: 118px;
    font-family: Montserrat,system-ui;
    font-size: 26px;
    color: white;
}