Css 如何使用overflow-y:auto使绝对div扩展到包装器之外？

我有一个div（红色包装），带有overflow-y:auto和一些项目。每个项目都有一个引导下拉菜单（绿色），该菜单位于绝对位置。我似乎不明白为什么菜单没有扩展到包装器之外，而是为父包装器div创建了一个水平滚动条

从包装器中删除overflow-y可以获得所需的效果（请参见包装器2），但我松开了父级的垂直滚动

<style>
    .wrapper {
        position: relative;
        width: 200px;
        height: 300px;
        background: red;
        overflow-y: auto;
        overflow-x: auto;
    }

    .menu {
        position: absolute;
        background: green;
        width: 150px;
        height: 70px;
        right: -20px;
        z-index: 1;
    }

    .wrapper ul {
        list-style: none outside;
        padding-left: 0;
    }

    .wrapper li {
        background: blue;
        width: 100%;
        height: 50px;
        color: #fff;
        margin-bottom: 5px;
        position: relative;
    }

    .wrapper2 {
        position: relative;
        width: 200px;
        height: 300px;
        background: red;
    }

    .wrapper2 ul {
        list-style: none outside;
        padding-left: 0;
    }

    .wrapper2 li {
        background: blue;
        width: 100%;
        height: 50px;
        color: #fff;
        margin-bottom: 5px;
       position: relative;
    }
</style>
<div class="wrapper">
    <h4>
        A
    </h4>

    <ul>
        <li>
            <div class="menu">
                Menu goes here
            </div>


            1
        </li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>



</div>





<div class="wrapper2">

    <h4>
        B
    </h4>

    <ul>
        <li>
            <div class="menu">
                Menu goes here
            </div>


            1
        </li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>



</div>

.包装纸{
位置：相对位置；
宽度：200px；
高度：300px；
背景：红色；
溢出y：自动；
溢出-x：自动；
}
.菜单{
位置：绝对位置；
背景：绿色；
宽度：150px；
高度：70像素；
右：-20px；
z指数：1；
}
包装纸{
列表样式：外部无；
左侧填充：0；
}
李先生{
背景：蓝色；
宽度：100%；
高度：50px；
颜色：#fff；
边缘底部：5px；
位置：相对位置；
}
.wrapper 2{
位置：相对位置；
宽度：200px；
高度：300px；
背景：红色；
}
.wrapper2 ul{
列表样式：外部无；
左侧填充：0；
}
.包装纸2李{
背景：蓝色；
宽度：100%；
高度：50px；
颜色：#fff；
边缘底部：5px；
位置：相对位置；
}
A.


菜单在这里
1.

二,
三,
四,
五,
六,
七,
八,

B


菜单在这里
1.

二,
三,
四,
五,
六,
七,
八,

---

默认情况下，

溢出

值为

可见

。因此，在第二种情况下，它将显示所有内容，并且没有滚动条。

---

在您的情况下，您不能在一个元素上保持

overflow-y:auto

和

overflow-x:visible

，因为将

visible

放在一起时将设置为

auto

。请参阅about it

，但在第二种情况下，它确实会溢出到父级之外，即，当我移除包装器的垂直滚动时，无法执行此操作。要保持Y轴上的滚动和X轴上的滚动可见，无需使用position fixed+使用少量javascript定位菜单。请看这里>谢谢。链接解释了很多