Css 如何使下拉菜单在具有水平滚动条的容器外部正确显示

我有一个下拉列表，我想适当地显示在容器外面，容器有一个水平滚动条。它目前被“掩埋”在容器内

请参见演示：

容器具有以下硬限制：

width: 300px;
overflow-x: auto;

我唯一的要求是，解决方案应该与水平滚动条一起工作，最好不要使用javascript

• 请参阅尝试1:。当我们不滚动时，这个版本可以正常工作。我们一滚动，它就发出鸟喙声

• 请参阅尝试2:。这个版本完全破坏了滚动条

---

本文对这个问题进行了很好的解释，并提供了一个解决方案，尽管它仍然要求JS正确定位子菜单：

但在您的情况下，只需从

下拉列表中删除
位置：relative

这是因为即使是绝对定位的元素也只是假设它们在正常流中的位置，而“坐标”（顶部，左侧，…）没有明确指定，而是保持其初始默认值
auto

（但是，如果树上更高的任何祖先元素被定位，这将不起作用——比如在示例中为
.container
添加
position:relative
，它会再次中断。在这种情况下，我想您可能必须采用上述文章中概述的“完整”解决方案。）
我认为仅使用css不可能做到这一点，因为您的父容器具有溢出-y:none。孩子们将无法覆盖它们。您可以通过使用一点javascript来实现这一点。谢谢。我认为删除
position:relative
与我在上面的尝试1中尝试的方法相同。然而，我们一滚动，它就坏了。啊，没有滚动，所以我没有注意到：/嗯，我想你可能需要一个JS解决方案。