flex vs. Positionserhebung - Brutalität PUR!

[Ja hallo, hier spricht der Max]

Hallo,

Folgender Irrsinn macht mir derzeit viel Freude:

<div id="container"><img src="nowYouSeeMe.svg" alt=""></div>

#container {
	width: var(--auf-jeden-Fall-weniger-als-die-Bilddimensionen);
	height: var(--auf-jeden-Fall-weniger-als-die-Bilddimensionen);
	/*(...)*/
	display: flex;
	justify-content: center;
	align-items: center;
	
}
#container img {
	max-width: 100%;
	max-height: 100%;
}

Wenn ich mir nun die top - Werte der Elemente via der getBoundingClientRect() Methode gönne, und diese in der Konsole logge, spuckt mir diese für den top-Wert von img doch recht abenteuerliche Werte aus,

z.B. -- top für container: 8 -- vs. -- top für IMG: 208 --

...obwohl Bild, da ja größer als der Container, optisch oben bündig mit dem Container abschließt. Setze ich #container align-items auf flex-start, dann ergeben die top-Werte plötzlich Sinn i.e. sind identisch.

Was passiert hier hinter den Kulissen, warum und wie kann ich meinem Haus- und Hofbrowser das abgewöhnen?

Danke Max!