如何避免溢出-x影响y轴？

Question

我知道有类似的问题已被问到，但到目前为止，他们都没有能够帮助我，所以在这里。我有一个表，其容器具有固定的宽度，因此当它有太多列时，它会在x轴上溢出。

这个表也有标题过滤器，当我的下拉过滤器在表上的行太少时，问题就出现了。如果下拉列表的高度大于表格的高度，它将添加scroll-y，即使我只设置了overflow-x。这是一些模拟代码：

.list-container {
  background-color: pink;
  width: 500px;
  overflow-x: auto;
}

.list-row {
  height: 50px;
}

.list-header-filters {
  background-color: orange;
  height: 50px;
  width: 600px;
}

.down {
  background-color: lime;
  width: 100px;
  height: 300px;
}

<div class="list-container">
  <div class="list-header-filters">
    <div class="down"></div>
  </div>
  <div class="list-row"></div>
  <div class="list-row"></div>
  <div class="list-row"></div>
</div>

如果您运行此代码，您将看到一个粉红色的容器，其中包含一个橙色div，我希望将其包含在容器宽度overflow-x：auto中，但是高绿色div我想要从容器中取出而不创建垂直滚动条。我已经玩过绝对位置，但这并不实际，因为我可以有多个下拉菜单，我无法为所有这些提供坐标。有没有办法实现这个目标？

谢谢