Css 边框仅显示在100%的容器上，没有完全溢出

我构建了一个“表式”div结构，它在x轴上有一个溢出，用于溢出内容

这个div结构有多个单元格，它们都在一行中，在另一行的下面。每个单元格顶部都有一个边框，用于分隔单元格，并模拟表格的外观

然而，一旦你滚动过最初的100%，边界就会停止，我不知道如何修复它

当用户滚动时，有没有人对如何使边框完全穿过可滚动的div有什么建议，而不仅仅是100%的初始屏幕

下面是上述问题的屏幕截图（您可以在其他内容之前看到灰色边框）：

这是我的总表（反应前端）：

<section className="data-table-section">
            <div className="data-table-container">
                <TableHeader />
                <TableCell />
            </div>
        </section>

<div className="table-cell-container">

            <div className="table-cell-asset-details">
                <img className="table-cell-image" src={assetLogo} />
                <p>{assetName}</p>
            </div>

            <div className="table-cell-price-details">
                <p>£{assetPrice}</p>
            </div>

            <div className="table-cell-price-change">
                { assetPriceChange >= 0 ? <p className="green">+{assetPriceChange}%</p> : <p className="red">{assetPriceChange}%</p> }
                
            </div>

            <div className="table-cell-market-cap">
                <p>£{assetMarketCap}</p>
            </div>

        </div>

.data-table-section {
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.data-table-container {
    height: auto;
    width: 90%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    z-index: 10;
    margin: 50px 0;
    border-radius: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table-container::-webkit-scrollbar {
    display: none;
  }

.table-cell-container {
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #e2e2e2;
}