Frontend Masters: CSS Grids and Flexbox in Responsive Web Design v2
Please click here to head to the course website.
Issues and Pull Requests
Please file issues and open pull requests here! Thank you! For issues with project files, either file issues on this repo or open a pull request on the projects repos. This repo itself is the course website.
License
The content of this workshop is licensed under CC-BY-NC-4.0. Feel free to share freely but do not resell my content.
The code, including the code of the site itself and the code in the exercises, are licensed under Apache 2.0.
Attributions
Icons made by Freepik from www.flaticon.com
Question about why flex has different behaviors between chrome and firefox
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!