绝对定位的子元素会影响滚动容器的大小

问：

我正在尝试创建一个无聊的旧内容页面，其中包含一些文本。因此，垂直滚动功能是强制性的。但是，有一个元素有一些视觉恶作剧，包括一个绝对定位的元素，其动画在某些时候可能会比其父容器的视口大，从而影响滚动容器的行为。我试图在这个代码笔中分解这个问题：

https://codepen.io/ConfusedHorse/pen/MWLvMbN（我被告知这在这里不受欢迎，请参阅下面的代码）

我试图实现的是：保留动画元素并允许它超过可用的视口，而不会影响父容器的行为。

我尝试将包含元素绝对定位，应用不同的溢出行为，摆弄 和 ，但毫无用处。绝对定位的元素位于另一个元素的内部，所以这不是问题。display: gridvisibility: visibleposition: relative

[HTML全文]

<div class="test">  
  <div class="exceed"></div>
  
  <section>
    Inside the grey rectangle you'll find another one of green shade which is positioned absolute and happens to be rotating. 
  </section>
  <section>
    The grey rectangle is placed inside a container which allows for vertical scrolling. 
  </section>
  <section>
    You might notice that the green rectangle affects the scroll container they're both placed in. How do you avoid this while keeping the green rectangles behavior intact?
  </section>  
</div>

CSS的

body {
  display: grid;
  place-content: center;
  block-size: 100dvh;
}

.test {
  position: relative;
  block-size: 20rem;
  aspect-ratio: 1;
  
  display: flex;
  flex-direction: column;
  gap: 1em;
  
  font-size: 1.25em;
  padding: 1em;
  background-color: rgb(127 127 127 / 1);
  color: rgb(255 255 255 / 1);
  
  >.exceed {
    position: absolute;
    inset-block-start: calc(50% - 25em);
    inset-inline-start: calc(50% - 25em);
    block-size: 50em;
    aspect-ratio: 1;
    background-color: rgb(0 255 0 / .25);
    
    animation: turn 10s linear infinite;
    
    @keyframes turn {
      to { rotate: 1turn };
    }
  }
}