Html 为什么overflow-y:auto会阻止孙子div溢出x？

给定以下标记和CSS，当其父元素

.I

悬停时，我希望红色方块（

.a

）溢出并出现在黑色包装上。但是，

.i

元素的父元素上的

overflow-y:auto

style属性导致当我悬停它们的父元素时它们被切断

预期的行为是，当其父元素悬停时，红色方块会延伸到黑色包装器元素中。到目前为止，我只能在从

.l

中删除

overflow-y:auto

时才能实现这一点

非工作示例：

.w{
高度：500px；
宽度：500px；
背景色：黑色；
}
l{
宽度：50%；
身高：100%；
背景颜色：浅灰色；
溢出y：自动；
}
.我{
位置：相对位置；
背景色：白色；
高度：50px；
宽度：100%；
}
.a{
位置：绝对位置；
高度：50px；
宽度：50px；
背景色：红色；
右：0；
}
i:悬停{
右：-25px；
}

使用

overflow-y

和

visible

以外的任何值建立一个新的块格式上下文，因此不能将一个轴中的

visible

与另一个轴中的任何其他内容混合。可能的重复：感谢您的编辑@TemaniAfif@NiettheDarkAbsol-谢谢你的解释。看起来我需要找到一种不同的方法来处理这个问题。使用

overflow-y

和

可见之外的任何值建立一个新的块格式上下文，因此，您不能将一个轴中的
可见
与另一个轴中的任何其他内容混合。可能的重复：谢谢您的编辑@TemaniAfif@NiettheDarkAbsol-谢谢你的解释。看来我需要找到一种不同的方式来处理这件事。