css - 垂直スクロールバーと相対的な位置から水平にオーバーフローする方法 (ngx-virtual-scroller 内にポップオーバーを作成)

Question

垂直仮想スクロールのあるサイドバーがあります。このスクロール コンテナー内のアイテムにカーソルを合わせると、ポップオーバーが表示され、アイテムに関する詳細情報が表示されます (たとえば、コンテナーの幅が十分でないため、コンテナー内の名前が省略され、ユーザーがアイテムの上にカーソルを合わせると、ポップオーバーが表示されます)。フルネームで表示されます）。ngx-virtual-scroller を使用すると、ポップオーバーによって水平スクロールバーが表示され、ポップオーバーが仮想スクローラーによってクリップされます。

通常のスクロール コンテナでこれを試してみると、これは起こりません。

さらに調査したところ、これは仮想スクローラーの相対的な位置に関係していることがわかりましたが、解決策を見つけることができません...

この問題を克服する方法を知っていますか?

<virtual-scroller #scroll [items]="items">
  <div *ngFor="let item of scroll.viewPortItems">
    <div class="reference" appHoverPopper [target]="tooltip">
      {{ item.name }}
    </div>

    <div class="popper" #tooltip>
      <span class="popper__arrow"></span>
      Hi, my name is {{item.name}}! I think I'm so amazing, don't you?
    </div>
  </div>
</virtual-scroller>

<div class="scroll-container">
  <div *ngFor="let item of items">
    <div class="reference" appHoverPopper [target]="tooltip">
      {{ item.name }}
    </div>
    <div class="popper" #tooltip>
      <span class="popper__arrow"></span>
      Hi, my name is {{item.name}}! I think I'm so amazing, don't you?
    </div>
  </div>
</div>

virtual-scroller {
    height: 200px;
    width: 300px;
}

.scroll-container {
    margin-top: 200px;
    height: 200px;
    width: 300px;
    overflow-y: auto;
}

.reference,
.popper {
    display: inline-block;
}
.popper {
    position: absolute;
    ...
  }

仮想スクローラーの問題

期待される結果 (通常のスクロール コンテナーで達成される)