Overflow not working as expected on absolutely positioned item in flex column

Question

I have an absolutely positioned element I'd like to overflow it's containing elements horizontally. This works as expected until I add change any of it's containing elements' overflow properties to anything other than visible, which is what I need to do in order to have one of them scroll vertically. I assumed adding overflow-y: scroll; overflow-x: visible would give me the results I am looking for, but it doesn't seem to honor the overflow-x property.

If you remove overflow-y: auto from the .parent elements in the code below, you can see the red box. Now, is it possible to have the .parent (cyan) box scrollable and the .grandchild (red) box visible at the same time?

Code Pen

https://codepen.io/robbymarston/pen/ExJEPae

HTML

<div class="grandparent">
  <div class="parent">
    <div class="child">
      <div class="grandchild"></div>
    </div>
    <div class="child"></div>
  </div>
</div>

CSS

.grandparent {
  background-color: lime;
  display: flex;
  flex-direction: column;
  height: 150px;
  padding: 10px;
  width: 100px;
}

.parent {
  background-color: cyan;
  flex-grow: 1;
  overflow-y: auto;
}

.child {
  background-color: yellow;
  height: 100px;
  position: relative;
  width: 100px;
}

.child:not(:last-child) {
  margin-bottom: 10px;
}

.grandchild {
  background-color: red;
  height: 100px;
  left: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
}

Answer 1

Unfortunately, you can't use visible and scroll together like that. Content is always clipped at the edges of a scroll container.

To get the desired effect, you'll need to either make the parent container wider, or place the absolute element outside of the container and sync its position programmatically.