Overflow: scroll; only the y-axis whilst keeping x-axis visible - html

Question

Problem case
I'm trying to create a scrolling, fixed-height list with flyouts for each list item.
I've used overflow-y: scroll; so that it can be scrolled in the y-axis.
However when I also try to use overflow-x: visible (in order to display the overflowing flyouts) it seems to be ignored
Code
Example 1 - List can be scrolled, but flyouts are clipped
As you can see, the flyouts (in-pink) are clipped
.list {
width: 72px;
height: 132px;
overflow-x: visible;
overflow-y: scroll;
background: lightgray;
}
.list li {
position: relative;
margin-bottom: 6px;
}
.flyout {
position: absolute;
top: 0;
bottom: 0;
left: 64px;
width: 128px;
background: pink;
}
<ul class="list">
<li>
Item 1
<div class="flyout">Item 1 Flyout</div>
</li>
<li>
Item 2
<div class="flyout">Item 2 Flyout</div>
</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
Example 2 - List cannot be scrolled, flyouts displayed just fine
Removing overflow-y: scroll shows the flyouts just fine, but as expected, the list can no longer be scrolled height-wise.
.list {
width: 72px;
height: 132px;
overflow-x: visible;
background: lightgray;
}
.list li {
position: relative;
margin-bottom: 6px;
}
.flyout {
position: absolute;
top: 0;
bottom: 0;
left: 64px;
width: 128px;
background: pink;
}
<ul class="list">
<li>
Item 1
<div class="flyout">Item 1 Flyout</div>
</li>
<li>
Item 2
<div class="flyout">Item 2 Flyout</div>
</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
A possible solution
I could of course make my .list have a width just enough so the flyouts don't overflow it.
I'd like to avoid that, as the list would be placed on top of a drawing canvas, thus it would block painting on the canvas via the mouse.
Using pointer-events: none so as not to block painting wouldn't work in this case as the pointer-events are necessary in order to detect the scroll-event for the list in the first place.

Answer 1

You will need to remove position: relative. Then the absolute positioned flyouts won't be restricted by overflow.
However, they won't scroll properly. You will need to trigger a relayout with JS.
// Force relayout
var li = document.querySelector('li:last-child');
setInterval(function() {
var parent = li.parentNode;
var next = li.nextSibling;
parent.removeChild(li);
parent.insertBefore(li, next);
}, 60);
.container {
position: relative;
overflow: hidden;
margin: 1em 0;
}
.list {
width: 72px;
height: 132px;
overflow-y: scroll;
background: lightgray;
margin: 0;
}
.list li {
margin-bottom: 6px;
}
.flyout {
display: inline-block;
position: absolute;
width: 128px;
background: pink;
}
<div class="container">
<ul class="list">
<li>
Item 1
<div class="flyout">Item 1 Flyout</div>
</li>
<li>
Item 2
<div class="flyout">Item 2 Flyout</div>
</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>

Answer 2

Since you cannot force a child to exit an overflow parent - and control it's position - here's a
jQuery solution
jQuery creates dynamically a <div class="flyout"></div> element.
On LI hover it calculates the position and shows the flyout element.
The content is taken from the hovered LI data-flyout attribute:
var $flyout = $("<div/>", {
class: "flyout",
appendTo: "body",
hover: function(e) {
$(this).toggle();
}
});
$("[data-flyout]").hover(function(e) {
var par = this.parentNode; // The overlfow parent element
$flyout.css({
left: this.offsetLeft + this.offsetWidth,
top: this.offsetTop - par.scrollTop,
}).html( this.dataset.flyout ).toggle();
});
.list {
width: 72px;
height: 132px;
overflow-x: hidden;
overflow-y: scroll;
background: lightgray;
}
.list li {
position: relative;
margin-bottom: 6px;
}
/* Created in "body" by jQuery */
.flyout {
position: absolute;
z-index:99999;
display: none;
background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
<li data-flyout="Item 1 Flyout">Item 1</li>
<li data-flyout="Item 2 Flyout">Item 2</li>
<li>No fly</li>
<li data-flyout="Item 4 Flyout">Item 4</li>
<li data-flyout="Item 5 Flyout">Item 5</li>
<li data-flyout="Item 6 Flyout">Item 6</li>
<li data-flyout="Item 7 Flyout">Item 7</li>
<li data-flyout="Item 8 Flyout">Item 8</li>
</ul>

Answer 3

Maybe you could leverage something like Superfish's vertical menu and call it a day.
I agree with the above comments in that I don't see a pure CSS way to accomplish this.