Divs是否被切断？

Question

我当前遇到的一个问题是，当我将任何元素插入div中时，我的缩放比例会关闭，并且大多数div都会被切断。当我插入两个新元素时，会发生这种情况。

我尝试过更改页面大小，调试打印了很多东西，也看到有什么影响，但我似乎不明白为什么它只是随机停止工作？

没有4个新元素：

具有4个新元素：

JSON目录：

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

Javascript：

            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)

            //4 new elements below (Above works 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：

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;
}

Answer 1

[我意识到我没有使用页边距，而是在顶部添加了页边距，解决了我的问题。