如何让设置overflow的Modal Body内的type ahead列表弹出父容器

我正在使用内部组件库的Modal组件，该组件分为Header、Body、Footer三个部分。
Modal Body设置了overflow: auto和max-height属性，当传入内容过长时会触发溢出规则，Modal Body变为可滚动状态。我希望保留Modal Body的这一特性，同时实现下文提到的自定义type ahead组件的功能需求。

我在Modal Body的底部添加了一个自定义type ahead组件，输入内容时，type ahead的下拉列表会撑开父div，无法弹出Modal之外。虽然已经给下拉列表设置了很高的z-index，能覆盖所有同级元素，但仍无法突破父容器的溢出限制。我需要调整type ahead列表的样式，使其始终能弹出父容器显示。
预期效果如下：

实际出现的问题如下：

我尝试了多种方案，目前只有修改Modal Body的height和overflow:hidden/visible属性才能实现效果，但这会破坏原有滚动特性，请问有没有其他可行的解决方案？
我编写了最小复现代码供参考。

• 使用Portal挂载下拉框
  利用框架提供的Portal能力（React用createPortal、Vue用Teleport），将type ahead的下拉列表节点直接渲染到Modal根节点或者全局body下，脱离Modal Body的DOM嵌套结构，自然就不受Modal Body的overflow规则约束。再通过getBoundingClientRect接口获取输入框的视口坐标，给下拉框设置position: fixed对应坐标即可，同时可以监听Modal Body的滚动事件实时更新下拉框位置，保证跟随输入框移动。该方案完全不改动Modal Body原有滚动逻辑，是通用性最高的解法。
• 调整下拉框展开方向
  不需要修改DOM结构，只需要给type ahead组件增加展开方向判断逻辑：计算输入框底部到Modal Body底部的距离，如果距离小于下拉框的高度，就自动改为向上展开，从输入框上方弹出，下拉框完全落在Modal Body可视范围内，不会被溢出裁剪，改造成本最低。
• Modal Body预留底部空间
  给Modal Body增加padding-bottom属性，取值等于下拉框的最大可展开高度，相当于在Modal Body底部提前预留出足够放下拉框的空白区域，下拉框弹出时刚好落在预留区域内，不会被裁剪，原有overflow: auto和滚动特性完全保留。该方案适合可以接受Modal内容较短时底部有空白的场景。

内容的提问来源于stack exchange，提问作者Vanmeeganathan P K