how to make a popover overflow: visible inside overflow: auto context

Question

I have a list of divs (overflow-x should scroll if the parent box is exceeded), and on hover, I want to see a popover.

My problem is, that if I hover any child div, the popover is considered for the overflow calculation, but I just want to have it visible on top of everything and not make it extend the scrolling area nor have it hidden on the right border of the parent. Can I detach it from the parent/child context somehow?

.parent {overflow-x: visible} is not an option, since I want to keep the parent size and have the children scrollable.

div {
  border-style: solid;
  margin: 10px;
}

.parent {
  overflow-x: auto;
  
  white-space : nowrap;
  width: 200px;
  height: 150px;
  background-color: grey;
}

.child {
  position: relative;
  
  display: inline-block;
  width: 70px;
  height: 100px;
  background-color: lightblue;
}

.popover {
  display: none;
  position: absolute;
  left: 30px;
  
  z-index:9999;
  width: 80px;
  height: 50px;
  background-color: lightgreen;
}

.child:hover .popover {
  display: block;
}

<div class="parent">
  <div class="child">
    <div class="popover">
    </div>
  </div
  ><div class="child">
    <div class="popover">
    </div>
  </div
  ><div class="child">
    <div class="popover">
    </div>
  </div>
</div>