伪元素卡在父母的溢出中

如何解决伪元素卡在父母的溢出中

在以下示例中，红色伪元素在父元素中创建水平滚动条，即使伪元素是 position: absolute 而父元素是 position: relative

.sidebar {
  height: 100vh;
  width: 300px;
  position: relative;
  background: grey;
  overflow: auto;
  overflow-x: visible;
}

.sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: -40px;
  width: 40px;
  height: 40px;
  background: red;
  z-index: 1;
}

.content-block {
  height: 200px;
  width: 50%;
  background: #0000ff;
  margin-bottom: 5px;
}

<div class="sidebar">
  <div class="content-block"></div>
  <div class="content-block"></div>
  <div class="content-block"></div>
  <div class="content-block"></div>
  <div class="content-block"></div>
</div>

这就是我希望实现的目标，除了蓝色框仍应在 .sidebar 内滚动：

• 红色伪元素应该在 .sidebar 的右侧可见
• 蓝色的 .content-block 元素应该在 .sidebar 内滚动

我还没有找到干净的方法来实现这两个..