Как сделать элемент с абсолютным позиционированием, чтобы в родительском элементе не отображались полосы прокрутки?

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: auto от родительского элемента, в противном случае он не будет прокручивать элементы в потоке. Например, синее поле должно заставить родительский элемент прокручиваться.

Примечание. Мне действительно нужно дочерний элемент go вне родительских границ Я делаю анимацию движущихся на экране вещей и должен go от края до края.

Итак, вопрос в том, почему позиционировать абсолютный элемент, что не должно занимать место ... ну, занимает место? И как я могу это исправить?

Одно решение - снова обернуть:

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

Попробуйте этот код

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

Answer 2

дочерний элемент оставил 250px + ширину 100px, так что вместе в 350px родительский элемент имеет ширину 300px, поэтому он показывает полосу прокрутки. Сделайте его левее 200px, тогда полоса прокрутки исчезнет.