Image in flex box showing different sizes when viewing the page on iphone safaria and desktop browers

Codepen
I have built a flex box containing only one flex-item which is an image element.
The image element size is 150px x 150px when viewing with Desktop Chrome and Desktop Chrome device mode.
However, when I view the website on my Ipad, the image size is larger and its not 150px x 150px.

My questions are:

  1. How does this problem occur?
  2. Why I can’t see this problem on Desktop Chrome Device Mode?

Hey guy,
You have not set the height of your .flex (.flex-container).
.flex{ border:2px solid red; display:flex; height: 150px; }

This was because you used the img link which has a svg (used to define vector-based graphics for the web) that defined height = “100%”.
You can view the source code at “https://www.w3.org/Icons/SVG/svg-logo.svg”. - https://www.w3schools.com/graphics/svg_intro.asp (you can see more).
If you do not define the height of the .flex, the .flex will have the height of the body, in which case will occupy a height of 100%
You can too define the svg direct in you html with ‘’