Why is the pink box ABOVE orange box?

Question

If you delete line 25 in CSS, you will notice that the orange box is above green and pink box. This result is NOT surprising for me.
But if you leave line 25 (that gives green box display:flex) then I don't understand why the orange box comes below pink box.

I am not using z-index and all these elements are not positioned.
So, as mdn says:

" When the z-index property is not specified on any element, elements are stacked in the following order (from bottom to top):

1) The background and borders of the root element
2) Descendant non-positioned blocks, in order of appearance in the HTML
3) Descendant positioned elements, in order of appearance in the HTML "

See the second point," the order of appearance in html".
This happens when I remove line 25 "display:flex" but why it doesn't happen with it?

https://code.sololearn.com/WkL99wn9s5XH/?ref=app

Answer 1

I think your div.b inside div.a !!?

Answer 2

Jayakrishna🇮🇳
Yes, I intentionally put it there. It's a child of a div element of class "a".
div "a" is a flex container
div "b" is a flex item