I am trying to create a layout with two columns, where the left column remains fixed while scrolling and only the right column scrolls. I don't want to use position: fixed because it affects the document flow.
Although I have looked into using the Bootstrap class sticky-top, unfortunately, it is not working for my specific case.
I have reviewed other answers and solutions, including this one, but none of the parent elements of the column I want to fix have the overflow property set.
Below is the code snippet I am working with:
<div class="row mb-4">
<div class="col-3 sticky-top">
<div class="row mb-4">
<div class="col-12 mb-5">
<div class="border border-secondary px-3 py-2">
<input type="number" class="form-control mb-3" placeholder="Enter Deal ID Here">
<button class="btn btn-primary rounded-0 w-100">Lookup Deal</button>
</div>
</div>
<div class="col-12 mb-5">
<div class="border border-secondary px-3 py-2">
<input type="text" class="form-control mb-3" placeholder="Enter EU Name Here">
<input type="text" class="form-control mb-3" placeholder="Enter Partner Name Here">
<button class="btn btn-primary rounded-0 w-100">Add Revenue</button>
</div>
</div>
</div>
</div>
<div id="phsc_data" class="col-9 table-active">
<!--BASE REBATES-->
<div class="row">
<table class="table table-light table-hover">
<caption class="font-weight-bold pl-2">Base Rebates</caption>
<thead class="">
<tr>
<th scope="col">LOB</th>
<th scope="col">Product Name</th>
<th scope="col">Product Category</th>
<th scope="col">Revenue</th>
<th scope="col">Rebate</th>
</tr>
</thead>
<tbody>
<tr>
<td>CSG</td>
<td>
<select class="form-control" name="" id="">
<option value="">ABC</option>
<option value="">DEF</option>
</select>
</td>
<td>Client A</td>
<td><input class="form-control" type="number" value="12345"></td>
<td>185</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>