CSS网格和溢出

Question

想象一下一个2列页面的最简单的CSS网格布局，两个页面正好占据视图宽度的50％。我有以这种方式布置的元素，但是我也有一些工具提示，它们绝对位于页面上的元素上。这些工具提示使内容溢出，并导致CSS网格具有水平滚动条，直到工具提示的整个宽度。

正如我提到的，每个面板的overflow-x属性似乎默认为滚动。也可以将其设置为“隐藏”，这将在工具提示越过另一个面板时将其截断。

但是，似乎不可能设置溢出：可见。是否有可能具有CSS网格列布局但还支持位置：可以“交叉”到网格另一侧的绝对元素？

编辑： https://codepen.io/AngryPidgeon/pen/eQVMgL 我发现设置“ overflow-y：scroll”是问题的一部分。如果未设置此项，则工具提示将按预期显示在右侧面板上。当设置了“ overflow-y：滚动”后，左侧面板也会水平滚动，无论如何都不允许工具提示叠加在右侧面板上。

.grid {
  display: grid;
  grid-template-areas: 'left right';
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
}

.left {
  background-color: beige;
  grid-area: left;
  overflow-y: scroll;
}
.right {
  background-color: khaki;
  grid-area: right;
}

.tooltip-wrapper {
  position: relative;
}

.tooltip {
  background-color: white;
  position: absolute;
  top: 105%;
  left: 105%;
}

<div class='grid'>
  <div class='left'>
    <div class='tooltip-wrapper'>
      <p>Content and text and stufdf</p>
      <p class='tooltip'>Tooltip text</p>
    </div>
    <p>left content</p>
    <p>Lorem ipsum</p>
    <p>Lorem</p>
    <p>left content</p>
    <p>Lorem ipsum</p>
    <p>Lorem</p>
    <p>left content</p>
    <p>Lorem ipsum</p>
    <p>Lorem</p>
    <p>left content</p>
    <p>Lorem ipsum</p>
    <p>Lorem</p>
  </div>
  <div class='right'>
    <p>More Content</p>
  </div>
</div>