Por que posição absoluta faz a página exceder?

Meu entendimento é que, quando um elemento é posicionado absoluto (mesmo com um valor de posição negativo), ele fica completamente fora do fluxo normal de conteúdo. Mas por que ainda faz a página transbordar? Quando você executa o snippet de código abaixo, a barra de rolagem horizontal aparece, e pensei que não deveria estar lá.

.relative {
  position: relative;
  background: pink;
}
.absolute {
  position: absolute;
  top: 0;
  right: -100px;
  width: 200px;
  height: 100px;
  background: rgba(0,0,0,.5);
}
<div class="relative">
  Placeholder <div class="absolute"></div>
</div>

questionAnswers(7)

yourAnswerToTheQuestion