所以我有这个，它使一个固定的窗口高于其他所有，并且最大高度为屏幕高度的80％。在里面，它有一个div，它包含有关某人和几个标签的信息，其中每个标签都有一个表格，显示该人使用的资源，这意味着每个表格中的元素数量可以是n行数。单击它们时，每个选项卡都会淡出。问题是我希望当父div达到其最大高度时，可以滚动选项卡的内容。但是你可以看到外面的卷轴和里面的卷轴都不起作用。我已经能够使父div停止增长超过其最大高度，但当我显示其中一个选项卡的内容时，它会越过父div并且不会激活滚动。 最好是内部滚动可以完成，以便我有固定的人的信息，但如果唯一的方法是使用外部滚动，那么无论如何帮助我。
function toggleR(object) {
var Rinfo = object;
var RArea = $(Rinfo).siblings("table");
RArea.fadeToggle("slow");
}.RHInfo {
position: fixed;
left: 17.5%;
right: 17.5%;
z-index: 350;
max-height: 77%;
overflow-y: hidden;
display: inherit;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 99%;
top: 5rem;
}
.RHInfolayout {
border-radius: 20px;
border: thin solid #929597;
overflow-y: hidden;
max-height: 100%;
max-width: 100%;
overflow-x: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
padding-bottom: 15px;
}
.fpInfoArea {
color: #FFFFFF;
font-weight: bolder;
font-size: large;
font-variant: small-caps;
font-family: "Kelson bd";
z-index: 15;
-webkit-box-shadow: 0px 1px 11px 4px rgba(9, 9, 9, 1.00);
box-shadow: 0px 1px 11px 4px rgba(9, 9, 9, 1.00);
border-radius: 0px 0px 8px 8px;
background-color: #929597;
height: 1.75rem;
}
.red {
background-color: #ED2625 !important;
}
.RHInfoContainer {
overflow-y: scroll;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
overflow-x: hidden;
max-width: 100%;
max-height: calc(100% - 1.75rem - 15px);
position: relative;
flex-direction: column;
}
.downby1 {
margin-top: 0.25rem;
}
.hdivider {
height: 2px;
background-image: -webkit-linear-gradient(0deg, rgba(203, 50, 50, 0.00) 0.52%, rgba(180, 49, 49, 0.50) 14.51%, rgba(66, 66, 66, 0.50) 52.33%, rgba(180, 49, 49, 0.50) 88.60%, rgba(203, 50, 50, 0.00) 100%);
background-image: -moz-linear-gradient(0deg, rgba(203, 50, 50, 0.00) 0.52%, rgba(180, 49, 49, 0.50) 14.51%, rgba(66, 66, 66, 0.50) 52.33%, rgba(180, 49, 49, 0.50) 88.60%, rgba(203, 50, 50, 0.00) 100%);
background-image: -o-linear-gradient(0deg, rgba(203, 50, 50, 0.00) 0.52%, rgba(180, 49, 49, 0.50) 14.51%, rgba(66, 66, 66, 0.50) 52.33%, rgba(180, 49, 49, 0.50) 88.60%, rgba(203, 50, 50, 0.00) 100%);
background-image: linear-gradient(90deg, rgba(203, 50, 50, 0.00) 0.52%, rgba(180, 49, 49, 0.50) 14.51%, rgba(66, 66, 66, 0.50) 52.33%, rgba(180, 49, 49, 0.50) 88.60%, rgba(203, 50, 50, 0.00) 100%);
}
.RHInfoContainer #ResourcesArea {
flex: 1;
max-height: 90%;
overflow-x: hidden;
overflow-y: auto;
display: block;
padding-top: 10px;
margin-top: -10px;
padding-bottom: 10px;
}
.slimtable tr th {
padding-top: 0.1rem;
background-color: #d32f2f;
color: #FFFFFF;
font-style: normal;
font-variant: normal;
font-weight: lighter;
font-size: small;
padding-bottom: 0.1rem;
border: thick solid #f44336;
-webkit-box-shadow: 0 0px;
box-shadow: 0 0px;
z-index: 1;
}
.slimtable tr td {
background-color: #464141;
border: thin solid #232323;
z-index: 1;
color: #FFFFFF;
padding-top: 0.3rem;
padding-bottom: 0.4rem;
}<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="RHInfocard" class="RHInfo">
<div class="col-lg-10 col-lg-offset-1 RHInfolayout white col-md-12 col-sm-12">
<div class="col-lg-12 fpInfoArea red">
<div>INFORMACIÓN DEL RECURSO HUMANO EN EL
<div id="IdFP"> FP1418</div>
</div>
</div>
<div class="col-lg-12 RHInfoContainer">
<div class="row">
<div id="InfoRH" class="col-lg-12 downby1">
<div id="RHBajaButton" class="col-lg-10 downby2 col-md-10 col-sm-9"><button class="BajaButton btn red white-text right">BAJA</button></div>
<div id="RHNombre" class="col-lg-10 downby1 pdownby1 col-md-10 col-sm-9">
<div class="col-lg-3 col-md-3 col-sm-4">Nombre:</div>
<div id="nombre" class="col-lg-9 col-md-9 col-sm-8"></div>
</div>
<div id="RHPuesto" class="col-lg-10 col-md-10 col-sm-9">
<div class="col-md-6 col-lg-6 col-sm-8">Función(es) en el proyecto:</div>
<div id="puesto" class="col-md-offset-0 col-md-6 col-lg-6 col-sm-4"></div>
</div>
</div>
<div class="col-lg-12 downby1 pdownby1 col-md-offset-0 col-md-12 col-sm-offset-0 col-sm-12">
<div class="hdivider"></div>
</div>
</div>
<div id="ResourcesArea" class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-12 fpInfoArea red col-md-12 col-sm-12" onClick="toggleR(this);">RECURSOS TECNICOS UTILIZADOS</div>
<table class="slimtable">
<tbody id="listaRT">
<tr>
<th style="width: 10%" scope="col" class="center"><i class="fi-rt-circ white-text"></i></th>
<th scope="col">Nombre del Recurso Tecnico</th>
<th style="width: 25%" scope="col">Tiempo de Uso</th>
</tr>
<tr>
<td>iedjfi</td>
<td>iedjfi</td>
<td>iedjfi</td>
</tr>
<tr>
<td>iedjfi</td>
<td>iedjfi</td>
<td>iedjfi</td>
</tr>
<tr>
<td>iedjfi</td>
<td>iedjfi</td>
<td>iedjfi</td>
</tr>
<tr>
<td>iedjfi</td>
<td>iedjfi</td>
<td>iedjfi</td>
</tr>
<tr>
<td>iedjfi</td>
<td>iedjfi</td>
<td>iedjfi</td>
</tr>
<tr>
<td>iedjfi</td>
<td>iedjfi</td>
<td>iedjfi</td>
</tr>
<tr>
<td>iedjfi</td>
<td>iedjfi</td>
<td>iedjfi</td>
</tr>
</tbody>
<br>
</table>
</div>
<div class="col-lg-12 col-md-12 col-sm-12"> </div>
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-12 fpInfoArea red col-md-12 col-sm-12" onClick="toggleR(this);">RECURSOS MATERIALES UTILIZADOS</div>
<table class="slimtable">
<tbody id="listaRM">
<tr>
<th style="width: 10%" scope="col" class="center"><i class="fi-rm-circ white-text"></i></th>
<th scope="col">Nombre del Recurso Material</th>
<th style="width: 25%" scope="col">Cantidad Utilizada</th>
</tr>
<tr>
<td>iedjfi</td>
<td>iedjfi</td>
<td>iedjfi</td>
</tr>
<tr>
<td>iedjfi</td>
<td>iedjfi</td>
<td>iedjfi</td>
</tr>
<tr>
<td>iedjfi</td>
<td>iedjfi</td>
<td>iedjfi</td>
</tr>
</tbody>
</table>
</div>
</div>