我想在侧边栏和表之间创建一个滚动条，两者都在不同的容器中，我试图实现它，但只有表容器显示滚动条，而侧边栏是隐藏的。
在侧栏中有大约六行和大约有24列的表容器。
html,
body {
height: 100%;
}
header,
footer {
background: #ccc;
height: 20%;
}
#main {
height: 60%;
overflow-y: scroll;
}
.container{
position:relative;
}
.sidebar{
width:30%;
background-color:lightblue;
height: 1000px;;
float:left;
margin-left: -625px;
flex: 50%;
}<body>
<div class="container" id="main">
<div class="sidebar">
<div class="row">
<div class="row" id="row_id">
"side bar content"
</div>
</div>
</div>
</div>
<div class='container-l'>
<div id='container-table'>
<table class="table">
<thead>
<tr>
<th>Region</th>
<th> Area </th>
<th> Country </th>
</tr>
</thead>
<tbody>
<tr>
<td>US</td>
<td>North America </td>
<td>US</td>
</tr>
<tr>
<td>US</td>
<td>North America </td>
<td>US</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>我不确定我是否理解了这个问题，但您可以尝试使用列，或者将容器包装在显示flexdiv
.wrapper{
display: flex;
}<body>
<div class="wrapper">
<!-- your code here -->
<div class="container" id="main">
<div class="sidebar">
<div class="row">
<div class="row" id="row_id">
"side bar content"
</div>
</div>
</div>
</div>
<div class='container-l'>
<div id='container-table'>
<table class="table">
<thead>
<tr>
<th>Region</th>
<th> Area </th>
<th> Country </th>
</tr>
</thead>
<tbody>
<tr>
<td>US</td>
<td>North America </td>
<td>US</td>
</tr>
<tr>
<td>US</td>
<td>North America </td>
<td>US</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>