How to solve the problem of images in flex view stretching vertically in Safari on iOS

Problem

The Safari browser on iOS has a problem where images with the display property specified as flex are stretched vertically.

Solution

To resolve this issue, specify ‘align-items: flex-start;’ for the flex container. This will position the items in the flex container (in this case images) at the top of the container and keep their original size without stretching or shrinking.

.your-flex-container { 
 display: flex; 
 align-items: flex-start; 
}

The above configuration will solve the problem of images in flex display stretching vertically in Safari on iOS.