I am currently in the process of constructing a web page with Bootstrap 4. The layout consists of two columns, each contained within individual divs. My requirement is for the content on the right side to be scrollable while the content on the left remains fixed. I have attempted to use 'overflow' property but unfortunately, it doesn't seem to be functioning as expected. Whenever I scroll down, the left side div scrolls along with it. In my setup, I have a main div with the class 'container-fluid', which houses another div with the class 'row'. Within this arrangement, my two divs are placed accordingly:
<body>
<div class=container-fluid>
<div class=row>
<div class="col-md-3 pt-5 align-items-center back-color1 vh-100 overflow-hidden">
<img>
<p></p>
<h3></h3>
<div>
(for nav-btns..)
<p></p>
</div>
</div>
<div class="col-md-9 back-color2 overflow-auto">
<div class="vh-100">
<h1></h1>
<p></p>
<a></a>
<div> (space for img.) </div>
</div>
<div class="vh-100">
(this div for other contents on the page. This has to come down)
</div>
</div>
</div>
</div>
</body>
The issue at hand seems to lie with the 'overflow' property, and I am currently investigating why it isn't behaving as intended.