Absolute positioned div element affects document flow structure. Why? - dom

Question

As I read and understand, an absolute positioned element is ignored by the parent and removed from the DOM flow, but in my example (please see the code snippet) it's not behaving like that. In my opinion, the absolute positioned child element should be ignored by the parent div and thus the outer container shouldn't be expanded to contain the child. Why is that? And how should I solve that (keeping the containers scrollHeight unexpanded by the child)? Thanks in advance.
#container {
width: 300px;
height: 300px;
background-color: grey;
display: flex;
flex-flow: row wrap;
justify-content: center;
overflow-y: scroll;
gap: 10px;
padding: 10px 0;
}
.icon {
width: 120px;
height: 120px;
background-color: green;
position: relative;
}
#absolutePositionedChild{
position: absolute;
width: 50px;
height: 300px;
background-color: red;
top: 35px;
left: 35px;
}
<div id="container">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"><div id="absolutePositionedChild"></div></div>
</div>

Answer 1

The absolute positioned element is positioned relative to the nearest ancestor.
It means your absolute positioned element will position itself relative to the nearest parent element which has the property, position: relative
If it does not have a positioned ancestor, then it will use the document body.
#container {
width: 300px;
height: 300px;
background-color: grey;
display: flex;
flex-flow: row wrap;
justify-content: center;
overflow-y: scroll;
gap: 10px;
padding: 10px 0;
}
.icon {
width: 120px;
height: 120px;
background-color: green;
position: relative;
}
#absolutePositionedChild{
position: absolute;
width: 50px;
height: 120px;
background-color: red;
top: 0px;
left: 35px;
}
<div id="container">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"><div id="absolutePositionedChild"></div></div>
</div>