Element with position absolute affects container height when using translateY

I am wondering how is it possible that an absolute element could affect container height when translateY is used. I did minimal reproduction in the code sandbox:

https://codesandbox.io/s/relaxed-leaf-3hqsjm?file=/src/styles.css

CSS:

.section {
  position: relative;
  background-color: lightyellow;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: red;
  opacity: 0.5;
  text-align: right;
  pointer-events: none;
  transform: translateY(150%);
}

.content {
  background: lightblue;
}

HTML

<div className="section">
  <div className="content">
    <div>Test test</div>
    <div>Test test</div>
    <div>Test test</div>
  </div>
  <div className="bottom">bottom</div>
</div>

Any ideas on why this is happening and how to solve it? I would like to use translateY for animation appearance.