选择/组合弹出弹出溢出滚动元素

Question

我们有一个选择/组合框组件，其弹出选择器菜单不能脱离父<div style="overflow: scroll; height: 100px">元素。因此，基本上，选择器菜单是隐藏的，特别是如果组合框位于表单顶部或底部附近。

我相信原因是因为组件使用相对定位，所以选择器的大小可以与输入相同：

    .combo {
        display: block;
        position: relative;
        width: 100%;
        z-index: 50;
    }
    .combo_wrapper {
        position: absolute;
        background-color: red;
        width: 100%;
        overflow: auto;
        max-height: 120px;
        z-index: 50;
    }

例如，在下图中，红色选择器应延伸到蓝色滚动元素的外部。

这是该问题的简化演示： https://codepen.io/anon/pen/EqaMbK

如果我注释掉position: relative CSS规则，则红色弹出窗口会跳出父级滚动div，但是选择器宽度将变为整个页面宽度。

我可以通过将选择器的最小宽度设置为组合的宽度来使用JavaScript解决问题：

https://codepen.io/anon/pen/QewoBR

但是我想知道是否有一个纯CSS解决方案。

Answer 1

将overflow: visible;添加到父项，它将在不破坏其他CSS规则的情况下存档您想要的内容：

.scroll-panel {
   overflow: visible;
}

Answer 2

如果从overflow: auto;中删除.scroll-panel并替换为position: relative;，它将不会包含在父元素中，但仍相对于其放置。