Make a bootstrap column's content overflow instead of grow - html

Question

I've been looking here for the answer to this and I've seen a lot of questions, but nothing that addresses what I am trying to accomplish.
Essentially I am creating a location finder with a map on the right and a list on the left. Currently there are over 18,000 locations that can be searched so the list of locations on the left could be long and it doesn't make much sense to have the list extend beyond the size of the map on the right.
The layout I am looking for is similar to this:
To keep things responsive, I would like the height of the columns in the second row to be set with a percentage and not a pixel amount. I don't necessarily care much about the height of the map on the right, it's going to be sized using the responsive embedding that bootstrap has, and it works fine, but the problem I am having is getting the list on the left to overflow instead of just growing.
I've tried adding the various sizing classes to the column with overflow-auto. I've tried wrapping the contents of the column in another div and applying those classes. Nothing seems to work correctly.
The closest I got was getting the contents of the column to overflow and show the scrollbar, but the parent div still maintained the original height of the div so there was a huge amount of whitespace at the bottom under the row.
This whole thing is making me absolutely insane! I can't believe that something like this could be so difficult. The sizing classes examples seem to show what I'm looking for, but they aren't working in practice.
At the moment, this is what I have: https://codepen.io/zachattack05/pen/aeLmmv
--------------------------- UPDATE ---------------------------
After trying Zim's suggestion, the page is rendering the scrollbar correctly, but it appears to be much bigger than the 25% that's expected.
Here's a fullsize screenshot of the outcome and the row, despite having h-25 set, it appears to be 75% of the screen at least.
A better representation of what I am looking for might be something like this, but not to scale. The map area would be 25% of the height of the page. Essentially, the map area is sandwiched between some other rows. and then a footer at the bottom of the page. I don't want the map and the scrolling div to stretch all the way to the bottom of the screen, that's way too tall.

Answer 1

There have been other questions on this. Flexbox items are equal height and will always grow to the height of the tallest column. If you want to limit the height of one column, so that the other one scrolls, use an inner position:absolute element...
https://codeply.com/go/kYFBFBc28l
<div id="PanelLocationFinderContent" class="row flex-grow-1 position-relative">
<div id="locationlist" class="col-sm-4 overflow-auto bg-info">
<div class="position-absolute">
<p>text</p>
<p>text</p>
..
<p>text</p>
<p>text</p>
</div>
</div>
<div class="col-sm-8 bg-warning">
<div class="embed-responsive position-static">
<div class="embed-responsive-item embed-responsive-1by1 bg-secondary">
<div id="map" class="bg-success h-100">MAP CONTENT WILL BE HERE</div>
</div>
</div>
</div>
</div>