Popping Out of Hidden Overflow without using JS

Let say we have the following html structure

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

The idea is that main box(container) has overflow: hidden scroll to hold partuclar number of elements inside and show scroll when number is big enough. When hover on any inside div, absolute-ly positioned and displayed none elements should appear and stick to their respective parents, positioned relative.

Desired outcome looks like this:

However, we see this:

I found one solution which is to use javacript for calculating position of the parent div (position: relative) on each hover and thus adjust top and left properties for hover div.

Is there any possible way to visually break out of overflow only using CSS? Maybe some rearrangements of the structure or some CSS tweaks.