I've searched extensively for the solution to my problem, but haven't found a satisfactory answer yet.
My goal is to create a location finder with a map on the right and a list on the left. With over 18,000 locations to search through, the list could be long. It doesn't make sense for it to extend beyond the size of the map on the right.
This is the layout I have in mind:
https://i.sstatic.net/PY5gk.png
To ensure responsiveness, I want the columns' height in the second row to be set as a percentage rather than a fixed pixel amount. While I'm not overly concerned about the map's height on the right (as it will adjust responsively), I am struggling with getting the list on the left to overflow instead of just expanding endlessly.
I've experimented with applying different sizing classes with the overflow-auto property to the column. I've also tried wrapping the column's content in another div and applying these classes, without success.
The closest I came was getting the column's contents to overflow with a scroll bar, but the parent div retained its original height, resulting in significant empty space below the row.
This whole situation is driving me crazy! I find it hard to believe that achieving this seemingly simple layout is so challenging. The sizing classes examples appear to provide what I need, but they don't work when implemented.
Currently, my code looks like this: https://codepen.io/zachattack05/pen/aeLmmv
--------------------------- UPDATE ---------------------------
Following Zim's recommendation, the page now displays the scrollbar correctly, but it seems larger than the expected 25%.
Here's a full-size screenshot showing the result. Despite setting h-25, the row appears to take up at least 75% of the screen.
https://i.sstatic.net/lCDYW.png
A more accurate representation of what I envision is something similar to this image, although not to scale. The map area should occupy 25% of the page's height, nestled between other rows and a footer at the bottom. I don't want the map and scrolling section to stretch all the way down the screen, as that would be too tall.