Scroll bar doesn't scroll all the way to the bottom of my table

Question

I have a table that displays data, and it scrolls to see the rest of the data within the table. The issue is that I am unable to reach the bottom of the table while scrolling. This code is existing code from the previous developers and I'm trying to understand what is stopping it from scrolling to the bottom considering I don't know a whole lot about CSS. Any help would be appreciated, thanks.

When I remove the first div the scrolling works fine, but the issue is that there are three other tables within the same page, and they display depending on which button was clicked so I need to keep that div there.

Note: this.RenderBody() returns an array of elements. There are three more tables just like this above this one, and they are also experiencing the same issue. The .tableData are just different widths.

myFile.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>

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

This has never been an issue before, the tables being displayed on the application just recently started doing this, so I don't know if it's an overflow issue or something simpler.

Answer 1

I added in height: 100%

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

This seems to work but I don't know why

Answer 2

The container that is scrolling is likely overflowing past the size of it's parent, and overflow is being hidden. Find the parent of the container that has the scroll bar and either remove the set height, set overflow: visible, or shrink the set size of the scrollable div to be smaller than it's parent.