I am attempting to display a container containing input elements that receive a warning bubble positioned absolutely when the input is invalid. However, the issue I am facing is that the bubble does not extend beyond the boundaries of the container as anticipated.
The problem can be replicated by nesting div elements three levels deep. Here is the HTML code:
<div id="a">
<div id="b">
USER INPUT
<div id="c">BUBBLE</div>
</div>
</div>
And here is the CSS code:
#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;
}
I have combined them in a Codepen.
The intermediate layer (the input) has relative positioning, while the innermost layer (the bubble) is absolutely positioned directly below it. My intention is for the outermost div to scroll horizontally if there is horizontal overflow, but for the vertical overflow to be visible outside the container. As a result, I have defined overflow-x: auto and overflow-y: visible on this outermost layer. However, instead of the bubble extending beyond the container vertically, I get vertical scrolling.
If I change overflow-x to visible, the vertical scrolling disappears, which is puzzling to me. Why does changing the horizontal overflow setting impact how vertical overflow is handled? Is there a way to achieve horizontal scrolling for overflow while keeping vertical overflow visible?