Combine overflow-y: scroll with overflow-x: visible - html

Question

I have a div, that has flyout divs positioned absolute to the right. Its all working correctly but I need to add a max height to my main div. Since it will overflow, I add overflow-y scroll, but it messes everything up. It prevents my flyout divs from going outside of the main div, and places them inside with a horizontal scrollbar.
I've mocked up an example:
.menu {
height: 200px;
max-height: 200px;
width: 200px;
background-color: red;
margin-bottom: 50px;
}
.menu.overflow {
overflow-y: scroll;
background-color: purple;
height: 150px;
max-height: 150px;
}
.menu-item {
height: 30px;
width: 100%;
background-color: blue;
position: relative;
margin-bottom: 10px;
cursor: pointer;
}
.menu-item-flyout {
display: none;
width: 200px;
height: 100px;
position: absolute;
left: 100%;
background-color: green;
top: 0;
}
.menu-item:hover .menu-item-flyout {
display: block;
}
<!-- no overflow y scroll -->
working correctly:
<div class="menu">
<div class="menu-item">
<div class="menu-item-flyout"></div>
</div>
<div class="menu-item">
<div class="menu-item-flyout"></div>
</div>
<div class="menu-item">
<div class="menu-item-flyout"></div>
</div>
</div>
<!-- overflow y scroll -->
This is not working. I want to add overflow y
scroll to menu but it prevents the flyout
<div class="menu overflow">
<div class="menu-item">
<div class="menu-item-flyout"></div>
</div>
<div class="menu-item">
<div class="menu-item-flyout"></div>
</div>
<div class="menu-item">
<div class="menu-item-flyout"></div>
</div>
</div>

Answer 1

Unfortunately you can't mix overflow values. Per MDN on overflow-x:
If overflow-y is hidden, scroll or auto and this property is visible
(default) it will implicitly compute to auto.
auto, in this case, forces a scroll bar. There is no way to get around this: you cannot have a box overflow in only one direction.
As a general principal, menus based on hover are difficult to navigate as they are, but are treacherous from an accessibility standpoint. Adding scroll bars to the mix is a recipe for disaster. I'd recommend approaching the problem from another angle.