Horizontal Overflow Scrolling Disrupts Vertical Visible Overflow

Question

I'm trying to present a container whose children are input elements that get decorated with an absolutely positioned warning bubble on invalid input. However, the bubble is not overflowing visibly outside of the container as I'd expect.

The problem can be minimally reproduced with div elements nested three deep. Here's the HTML:

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

And the 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;
}

I've put them together in a Codepen.

The middle layer (the input) has relative positioning. The innermost layer (the bubble) is absolutely positioned to sit just below it. I want the outermost div to scroll horizontally if there's horizontal overflow, but I want the vertical overflow to break out of the container and be visible. Therefore, I've set overflow-x: auto and overflow-y: visible on this outermost layer. However, I get vertical scrolling instead of the bubble breaking out of the container.

If I change overflow-x to visible, there's no vertical scrolling anymore, which doesn't make sense to me. Why does the horizontal overflow setting affect how vertical overflow is treated? Is there a way to get scrolling horizontal overflow with visible vertical flow?

Answer 1

Unfortunately, this isn't possible by just setting overflow properties. This answer goes more in-depth about the weird behavior of overflow properties: https://stackoverflow.com/a/6433475/9473692

In short, even if you have overflow-y set to visible, it will be rendered as auto if overflow-x is set to anything other than visible.

This answer contains a possible workaround that may work for you: "overflow-y: scroll;" is hiding overflowing elements on the horizontal line

#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>