Need help with fixing overflow issue in a fixed-width div used as a left sidebar. The main content renders correctly except for tables with many columns, causing overflow before the scroll bar appears. How can this be resolved?
Various layout attempts have been made. One close solution involved setting the table's max-width to calc(100% - 248px): https://jsfiddle.net/t0qhoz1e/. While this works for overflowing tables, it leaves a 248px gap when no overflow occurs: https://jsfiddle.net/euad3q71/. Removing the sidebar resolves the issue but having it is preferred. Any suggestions would be appreciated.
.wrapper {
height: 100vh;
min-height: 100vh;
width: 100%;
overflow-x: hidden;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cba9a4a4bfb8bfb9aabb8bfee5f9e5f9">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container-fluid d-flex p-0 wrapper">
<div class="d-flex flex-column flex-shrink-0 bg-light" style="width: 248px;">side bar</div>
<div class="container-fluid d-flex flex-column">
<div class="row">some table controls</div>
<div class="table-responsive card flex-fill">
<table class="table">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
<th>Column6</th>
<th>Column7</th>
<th>Column8</th>
<th>Column9</th>
<th>Column10</th>
<th>Column11</th>
<th>Column12</th>
<th>Column13</th>
<th>Column14</th>
<th>Column15</th>
<th>Column16</th>
<th>Column17</th>
<th>Column18</th>
<th>Column19</th>
<th>Column20</th>
</tr>
</thead>
<tbody>
(table rows and data)
</tbody>
</table>
</div>
<div class="row">some pagination controls</div>
</div>
</div>