javascript - Position element outside container that has a fixed positioned element with overflow

Question

I'm trying to position an element (popover class) outside a container (container class) and make it move as the overflowed element (nav class) scrolls. I want the same behavior as if the popover was positioned absolutely to the nav.

I need to keep the overflow: auto in the nav element, so to position the popover element outside i need to have a container element, but i'm not figuring it out how to position in a way that it follows the scroll of the nav element.

I'm open to JavaScript solutions if there are no ways to do it with css.

.main {
  width: 100vw;
  height: 100vh;
}

.container {
  position: relative;
  background: red;
  width: 260px;
  height: calc(100vh - 65px);
}

.nav {
  position: fixed;
  width: 260px;
  height: calc(100vh - 65px);
  background: blue;
  overflow-x: hidden;
  overflow-y: auto;
}

.popover {
  width: 200px;
  height: 70px;
  background: green;
  position: absolute;
  top: 50px;
  left: 100%
}

<div class="main">
  <div class="container">
    <div class="nav">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    </div>
    <div class="popover"></div>
  </div>
</div>

question from:https://stackoverflow.com/questions/65930070/position-element-outside-container-that-has-a-fixed-positioned-element-with-over

Answer 1

Waitting for answers