如何使绝对定位元素不在父级中显示滚动条？

Question

.parent {
  width: 300px;
  height: 300px;
  background: red;
  position: relative;

}

.child-green {
  position: absolute;
  top: 10px;
  left: 250px;
  width: 100px;
  height: 100px;
  background: green;
}

.child-blue {
  background: blue;
  margin: 5px;
  width: 100px;
  height: 500px;
}

<div class='parent'>
  <div class='child-green'></div>
  <div class='child-blue'></div>
</div>

代码示例：https://codepen.io/asad111/pen/jOPqpaj

所有元素都必须在这个位置，但绿色元素没有水平滚动条（当然这不能只是overflow-x隐藏或类似的hack）

我不能从父级获取overflow: auto，否则对于流中的元素它不会滚动。例如蓝色框需要强制父级滚动。

注意：我真的需要孩子走出父母的界限我正在制作屏幕上移动的动画，需要边到边。

所以问题是，为什么定位绝对元素，它不应该占用空间......嗯，占用空间？我该如何解决？

一种解决方案是再次包装：

https://codepen.io/asad111/pen/jOPqvYV

.parent {
  width: 300px;
  height: 300px;
  background: red;
  position: relative;
  overflow: auto;
}

.child-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.child-green {
  position: absolute;
  top: 10px;
  left: 250px;
  width: 100px;
  height: 100px;
  background: green;
}

.child-blue {
  background: blue;
  margin: 5px;
  width: 100px;
  height: 500px;
}

<div class='parent'>
  <div class='child-wrapper'>
    <div class='child-green'></div>
  </div>
  <div class='child-blue'></div>
</div>

还有其他想法吗？

Answer 1

子元素留下了 250px + 宽度 100px，所以在父元素中总共有 350px 是 300px 宽，这就是它显示滚动条的原因。 让它离开200px，然后滚动条就会消失。

Answer 2

试试这个代码

.child {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100px;
  height: 100px;
  background: green;
}