我试过很多东西，也在网上搜索过，但我找不出这个问题的解决方案。
我有一个div容器，它有max-height,min-height和overflow：auto。当内部内容大于max-height时，会按预期出现滚动条。但是，在内容内部有一个下拉列表，点击该下拉列表时，菜单会展开，它不是显示在父容器外部，而是改变了内部内容的高度。
我在网上找到的唯一可行的解决方案是用相对定位将容器包装到div，并使下拉列表成为绝对的，但现在有一个很大的缺点，下拉列表保持固定在滚动上，因为它是相对于包装器而不是内容绝对定位的。有没有什么常见的方法来解决这个问题或者其他的解决方案？
我没有发布任何代码，因为我不希望答案依赖于我的代码。如果可能的话，我只想要一个包含以下属性的最小示例：
为了说明我对这个问题的评论，这里有一个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>