如何在CSS中显示带有溢出：auto的父元素外的下拉菜单？

Question

我试过很多东西，也在网上搜索过，但我找不出这个问题的解决方案。

我有一个div容器，它有max-height,min-height和overflow：auto。当内部内容大于max-height时，会按预期出现滚动条。但是，在内容内部有一个下拉列表，点击该下拉列表时，菜单会展开，它不是显示在父容器外部，而是改变了内部内容的高度。

我在网上找到的唯一可行的解决方案是用相对定位将容器包装到div，并使下拉列表成为绝对的，但现在有一个很大的缺点，下拉列表保持固定在滚动上，因为它是相对于包装器而不是内容绝对定位的。有没有什么常见的方法来解决这个问题或者其他的解决方案？

我没有发布任何代码，因为我不希望答案依赖于我的代码。如果可能的话，我只想要一个包含以下属性的最小示例：

1. 容器具有最大高度
2. 如果内容大于容器的最大高度，则容器应显示滚动条。
3. 内容有一个下拉列表，该下拉列表应与内容的每一个其他元素一起滚动。
4. 下拉元素的菜单选项正在转义容器/显示在容器边界之外。

Answer 1

为了说明我对这个问题的评论，这里有一个MCVE：

null

.scroll-container {
  border: 3px dashed #eee;
  height: 400px;
  padding: 10px;
  overflow: auto;
  width: 400px;
}

.content {
  background-color: #f0f0f0;
  height: 600px;
  position: relative;
}

.dropdown {
  background-color: orange;
  position: absolute;
  height: 300px;
  width: 300px;
  left: 300px;
}

<div class="scroll-container">
  <div class="content">
    <div class="dropdown"></div>
  </div>
</div>