当溢出添加到父级时，画布元素“隐藏”在父级边界内

Question

我基本上有两列，一列在左边，而pdf预览在右边，悬停时在它上面有一个大放大镜。

<div class="container">
  <div class="col-md-6">
     text here
  </div>
  <div class="col-md-6 scrollable-content">
      <com-pdf-preview>
      </com-pdf-preview>
  </div>
</div>

放大镜也是pdf预览的画布，是一个约400 x 400像素的球体，在靠近右侧的左边界时与左列重叠。 我遇到的问题是，我想使pdf预览可滚动，因此要执行以下操作的css类scrollable-content类：

.scrollable-content { 
        height: calc(100vh - 100px);
        overflow: auto;
}

如果我消除了溢出：自动；一切都很好。溢出时：自动；添加后，放大镜圆被右div的边框裁剪。