水平溢出滚动中断垂直可见溢出

Question

我试图展示一个容器，它的子元素是input元素，这些元素在无效输入时会被一个绝对定位的警告气泡装饰。然而，气泡并没有像我预期的那样明显溢出容器外。

使用嵌套三个深度的div元素，可以最小限度地再现该问题。这是HTML:

<div id="a">
<div id="b">
USER INPUT
<div id="c">BUBBLE</div>
</div>
</div>

和CSS：

#a {
background-color: #EEEEEE;
padding: 10px;
overflow-x: auto;
overflow-y: visible;
}
#b {
background-color: pink;
position: relative;
}
#c {
background-color: springgreen;
position: absolute;
top: 100%;
left: 0;
}

我把它们放在一个代码笔里。

中间层(输入(具有相对定位。最内层(气泡(绝对位于它的正下方。如果有水平溢出，我希望最外层的div水平滚动，但我希望垂直溢出从容器中溢出并可见。因此，我在最外层设置了overflow-x: auto和overflow-y: visible。然而，我得到的是垂直滚动，而不是从容器中弹出的气泡。

如果我将overflow-x更改为visible，则不再有垂直滚动，这对我来说没有意义。为什么水平溢出设置会影响垂直溢出的处理方式？有没有一种方法可以让滚动的水平溢出和可见的垂直流？

Answer 1

不幸的是，仅通过设置溢出属性是不可能做到这一点的。这个答案更深入地讨论了溢出属性的怪异行为：https://stackoverflow.com/a/6433475/9473692

简而言之，即使将overflow-y设置为visible，如果将overflow-x设置为除visible之外的任何值，它也将呈现为auto。

这个答案包含一个可能适用于您的变通方法："；overflow-y：滚动"正在隐藏水平线上的溢出元素

#parent {
display: inline-block;
position: relative;
}
#absolute-child {
position: absolute;
bottom: -15px;
}
#child {
overflow-x: scroll;
width: 200px;
}
.child {
width: 400px;
background: linear-gradient(to right, white, lightblue);
}

<div id="parent">
<div id="absolute-child">
overflow
</div>
<div id="child">
<div class="child">child</div>
</div>
</div>