width: 100% of an absolute positioned element is bigger than the parent

Question

I have a div with unknown width and height, this div is one of the children of a bigger div.

#myDiv {
    /* Blah blah blah */
}

#inner {
    position: absolute;
    width: 100%;
    height: 100%;
}

<div id="myDiv">
    <div id="inner"></div>
</div>

But the problem is that the #inner div doesn't fit properly, it's way bigger than its parent #myDiv while its width and height are set to 100%.

What am I doing wrong?

Answer 1

By making any element position: absolute; means: place me to the first parent that is position: relative; which is not always equal to its parent element.

And if there are other children you need to remember that one of them will be places "under" the element posiotionated absolutely.