滚动条无法一直滚动到表格底部

Question

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

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

注意：这个。RenderBody() 返回一个元素数组。 上面还有三个类似的表，它们也遇到了同样的问题。 .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;
}

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

Answer 2

滚动的容器可能溢出超过其父级的大小，并且溢出被隐藏。 找到具有滚动条的容器的父级，然后删除设置的高度、设置溢出：可见或将可滚动div 的设置大小缩小为小于其父级。