I want to create a scroll bar between the sidebar and the table both are in different container I tried to implement it but only the table container is displaying with the scroll and sidebar is hidden.
In side bar there would around six rows and table container which have around around 24 columns.
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>I'm not sure if I did understand the question, but you can try using columns too, or wrap the containers in a display flex div
.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>