Question about why flex has different behaviors between chrome and firefox

[Suiteprecure]

hi, I found different flex behavior on chrome and firefox when I was following the lecture video "Text Overlay Effect with Flexbox" on 03:10.
After I add "display: flex" to figure, I found chrome has different behaviors than firefox.
Here is the code after adding "display: flex": https://codepen.io/nancyz/pen/NWwvEmV?editors=1100

screen shot on chrome

screen shot on firefox

after I try to add wrapper for image and add height for image css, I found the behaviors of flex acts similarly
here is the code after I made some modification and looks same on both chrome and firefox: https://codepen.io/nancyz/pen/NWwvEVV?editors=1100

I am curious why browsers have different behavior like this. Is adding wrapper to image solve this problem? If so, why adding wrapper solve this problem?

Thanks!