Quiero crear una barra de desplazamiento entre la barra lateral y la tabla, ambas están en un contenedor diferente. Intenté implementarlo, pero solo se muestra el contenedor de la tabla con el desplazamiento y la barra lateral está oculta.
En la barra lateral habría alrededor de seis filas y un contenedor de mesa que tiene alrededor de 24 columnas.
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>No estoy seguro de haber entendido la pregunta, pero también puede intentar usar columnas o envolver los contenedores en una pantalla flexible 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>