如何在父元素外顯示下拉菜單並溢出：CSS 中的自動？

Question

我已經嘗試了很多東西並在網上搜索，但我無法弄清楚這個問題的解決方案。

我有一個 div 容器，它有一個最大高度、最小高度和溢出：auto。 當內部內容大於 max-height 時，會按預期出現滾動條。 但是，在內容內部有一個下拉菜單，當點擊它時，菜單會展開，而不是顯示在父容器之外，這就像改變內部內容的高度一樣。

我在網上找到並且對我有意義的唯一解決方案是將容器包裝到具有相對定位的 div 並使下拉列表成為絕對值，但是現在有一個很大的缺點，下拉列表保持固定在滾動上，因為它相對於包裝器而不是內容。 有什么常見的方法來解決這個問題或任何其他解決方案嗎？

我沒有發布任何代碼，因為我不希望答案依賴於我的代碼。 如果可能的話，我只想要一個帶有這些屬性的最小示例：

1. 容器有一個最大高度
2. 如果內容大於容器的最大高度，則容器應顯示滾動條。
3. 內容有一個下拉菜單，它應該與內容的所有其他元素一起滾動。
4. 下拉元素的菜單選項是 escaping 容器 / 顯示在容器邊界之外。

Answer 1

為了說明我對這個問題的評論，這里有一個 MCVE：

 .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>

如您所見，使用基於 div.content 的相對div.content的絕對定位，橙色div.dropdown會創建水平溢出，這是您不想要的。 要解決此問題，您需要從div.content中刪除position: relative並使用transform: translateX(300px); 而不是left: 300px; ：

 .scroll-container { border: 3px dashed #eee; height: 400px; padding: 10px; overflow: auto; width: 400px; }.content { background-color: #f0f0f0; height: 600px; }.dropdown { background-color: orange; position: absolute; height: 300px; width: 300px; transform: translateX(300px); }

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