html - 滚动条没有一直滚动到我的表格底部

Question

我有一个显示数据的表格，它会滚动以查看表格中的其余数据。问题是滚动时我无法到达表格底部。这段代码是以前开发人员的现有代码，考虑到我对 CSS 了解不多，我试图了解是什么阻止它滚动到底部。任何帮助将不胜感激，谢谢。

当我删除第一个 div 时，滚动工作正常，但问题是同一页面中还有其他三个表，它们根据单击的按钮显示，因此我需要将该 div 保留在那里。

注意:this.RenderBody() 返回一个元素数组。在这张上面还有三张这样的 table ，他们也遇到了同样的问题。 .tableData 只是宽度不同。

我的文件.js

                <div className="JobTabContentContainer" id="PendingContainer">
                    <table className="TableHeaderContainer">
                        <thead>
                            <tr>
                                <th className="tableData10">Data1</th>
                                <th className="tableData10">Data2</th>
                                <th className="tableData10" >Data3</th>
                                <th className="tableData10" >Data4</th>
                                <th className="tableData12" >Data5</th>
                                <th className="tableData8"  >Data6</th>
                                <th className="tableData10" >Data7</th>
                                <th className="tableData10" >Data8</th>
                                <th className="tableData10" >Data9</th>
                                <th className="tableData10" >Data10</th>
                            </tr>
                        </thead>
                    </table>

                    <div className="TableBodyScrollingDiv">
                        <table className="TableBodyContainer">
                            <tbody>  
                           {this.RenderBody("Pending",this.props.jobData)}
                            </tbody>
                        </table>
                    </div>
                </div>

我的文件.css

     .JobTabContentContainer {
        flex: 1;
        display: none;
        flex-direction: column;
    }
.ViewedContentContainer {
    height: 95%;
    display: flex;
    flex-direction: column;
    /* overflow-y: auto; */
}

    .ViewedContentContainer .TopBarContainer,
    .ViewedContentContainer .BottomBarContainer,
    .ViewedContentContainer .TitleBarContainer {
        min-height: fit-content;
        min-width: 916px;
        padding-top: 5px;
        padding-bottom: 5px;
        position: sticky;
        left: 0;
        right: 0;
    }


    .ViewedContentContainer .TitleBarContainer {
        text-align:center;
    }
    .ViewedContentContainer .TitleBarContainer h1 {
        margin: 0;
        padding: 0;
    }

        .ViewedContentContainer .TopBarContainer .TopBarSearchInput {
            float: right;
            width: 40%;
            max-width: 200px;
        }

    .ViewedContentContainer .TableHeaderContainer {
        border: 2px solid var(--Blue);
        background-color: var(--Blue);
        color: var(--LighterBlue);
        text-align: center;
        min-width: 916px;
    }

    .ViewedContentContainer .TableBodyScrollingDiv {
        text-align: center;
        border: 2px solid var(--Blue);
        background-color: white;
        overflow-y: auto;
        overflow-x: hidden;
        min-width: 916px;
        max-height: 90%
    }

        .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer {
            width: 100%;
            font-size: 10px;
        }
            .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow {
                display: table-row;
            }
                .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow:nth-child(odd) {
                    background-color: var(--LightBlue);
                    color: var(--DarkBlue);
                }

                .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow:nth-child(even) {
                    background-color: var(--LighterBlue);
                    color: var(--DarkBlue);
                }

                .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow:hover {
                    background-color: var(--AccentBlue);
                    color: var(--DarkBlue);
                }

                .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow td{
                    word-wrap: break-word;
                }

                .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow .JobReviewStatusBtn {
                    border-radius: 5px;
                }

这以前从来都不是问题，应用程序上显示的表格最近才开始出现这种情况，所以我不知道这是溢出问题还是更简单的问题。

Answer 1

我添加了高度:100%

     .JobTabContentContainer {
        height: 100%
        flex: 1;
        display: none;
        flex-direction: column;
    }

这似乎有效，但我不知道为什么