不使用JS弹出隐藏的溢出

Question

假设我们具有以下html结构

<div class="overflow box">
  <div class="position-relative list-items">
    <div class="position-absolute show-on-hover">
  </div>
  <div class="position-relative list-items">
    <div class="position-absolute show-on-hover">
  </div>
  ...
  <div class="position-relative list-items">
    <div class="position-absolute show-on-hover">
  </div>
</div>

这个想法是，主盒子（容器）具有overflow: hidden scroll来将零件的数量容纳在内部，并在数量足够大时显示滚动。当hover位于div内部的任何位置时，absolute定位并显示的none元素应出现并粘贴在其​​各自的父位置relative上。

所需结果如下：

但是，我们看到了：

我发现one solution可以使用javacript计算每个悬停时父div（position: relative）的位置，从而调整悬停div的top和left属性

是否存在仅使用CSS就能在视觉上突破overflow的方法？也许对结构进行了一些重新排列或对CSS进行了一些调整。