使引导列的内容溢出而不是增长

Question

我一直在这里寻找这个问题的答案，我看到了很多问题，但没有一个能解决我想要完成的目标。

基本上我正在创建一个位置查找器，右侧是地图，左侧是列表。目前有超过 18,000 个位置可供搜索，因此左侧的位置列表可能很长，并且让列表超出右侧地图的大小没有多大意义。

我要找的布局是这样的：

为了保持响应，我希望将第二行中的列的高度设置为百分比而不是像素量。我不一定很关心右侧地图的高度，它将使用引导程序具有的响应式嵌入来调整大小，并且工作正常，但我遇到的问题是左侧的列表溢出而不仅仅是增长。

我尝试将各种sizing classes 添加到带有overflow-auto 的列中。我尝试将列的内容包装在另一个 div 中并应用这些类。似乎没有任何工作正常。

我得到的最接近的是让列的内容溢出并显示滚动条，但父 div 仍保持 div 的原始高度，因此行下方的底部有大量空白。

这整件事让我彻底疯了！我无法相信这样的事情会如此困难。大小调整类示例似乎显示了我正在寻找的内容，但它们在实践中不起作用。

目前，这就是我所拥有的：https://codepen.io/zachattack05/pen/aeLmmv

--------------- 更新 ------------------- --------

在尝试了 Zim 的建议后，页面正确地呈现了滚动条，但它似乎比预期的 25% 大得多。

这是结果和行的全尺寸屏幕截图，尽管设置了 h-25，但它似乎至少占屏幕的 75%。

我正在寻找的更好的表示可能是这样的，但不是按比例缩放的。地图区域将是页面高度的 25%。本质上，地图区域夹在其他一些行之间。然后是页面底部的页脚。我不希望地图和滚动 div 一直延伸到屏幕底部，这太高了。

Answer 1

已经有other questions 了。 Flexbox 项目的高度相同，并且总是会增长到最高列的高度。如果要限制一列的高度，以便另一列滚动，请使用内部 position:absolute 元素...

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>