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