Help with animating dialog element

I am having some difficulty understanding what's happening with this pen: https://codepen.io/mindjacker90/pen/KwwBpjj.
Everything works as expected until it transitions out. When the dialog closing transition runs, if the dialog has a positioned ancestor, the percentage values of properties like height become relative to that ancestor.
I do not understand why this only happens when the closing transition is playing.

I would appreciate any explanation. Thanks for taking the time to go through my question.
Was this page helpful?