让bootstrap`b-dropdown'从`overflow：scroll`容器中逃脱出来

Question

在this JSFiddle中，您会看到一个典型的{左侧边栏+右侧内容}布局，使用Bootstrap 4 {container-fluid，row，col}制作。

• 在左侧边栏中有一组过滤器。它可能包含几个消耗不确定垂直空间的过滤器，因此它们位于overflow-y:scroll div中。每个过滤器都有一个下拉列表，允许用户修改过滤器选项。
• 在右侧窗格中生成内容，按左侧边栏中的过滤器进行过滤。

现在，单击侧栏中的Filter 1（基于Bootstrap4的）下拉菜单，注意它由于无法逃脱而无法使用＃34;超出其overflow-y:scroll父母。

→问题：如何保留overflow-y:scroll侧边栏滚动行为（我需要因为可以有很多过滤器），同时让下拉项目（可能很大，两者都有）在宽度和高度上）＆＃34;逃离＆＃34; /不受边栏限制？

编辑看起来香草<select>不会遇到这个问题。遗憾的是，我使用<b-dropdown>中的一些功能，如果我回到香草<select>，我将失去： - /。还有其他解决方法/解决方案吗？

EDIT2 开始看起来像是一个错误，提交Bootstrap issue #24251 - Big dropdowns are unusable when used inside an overflow:scroll container, due to being constrained inside it。

TL; DR图像：

谢谢。