Javascript 溢出-x:滚动和溢出-y:带有x-滚动和下拉菜单的可见噩梦

在我开始之前，我想让你知道，我一直在到处寻找我的问题的解决方案，但不幸的是，我找到的最接近的线索没有实际问题的答案-
基本上，我在主页上动态加载了一些其他页面，在其中一些页面上我使用了下拉列表框。碰巧我之前没有注意到，因为任何页面的内容都不够宽，我无法发现问题。
我面临的问题是绝对定位的div（包含下拉列表）和该div父级上可见的水平滚动条。当我水平滚动页面时，下拉列表div保持在屏幕上的相同位置
我在这个链接下读到了关于“弹出”绝对div的内容：
但即使在那里，我也可以观察到我目前面临的类似问题，即父元素上出现的垂直滚动。
我试图实现类似的效果：

但是当列表框展开时，停止垂直滚动条的出现-相反，它应该会溢出框和派对封面水平滚动条。
这里我找到了另一个提示示例，如何实现它

但是当我试着玩它时，使红色框可以滚动内容，也可以溢出页面之外的内容内容垂直，没有创建垂直滚动条，我失败了
如果CSS本身不能提供这样的效果，我也可以使用JS。

经过3天的战斗，CSS最终获胜，我需要寻求帮助

我们将非常感谢您的支持

提前谢谢