I have a problem with <img>s inside flexbox in Safari browser (only). I want to create a horizontal list of same height but various width images. I can't set exact height for each image as it comes from proportion to the page width (33.333vw) for whole slider. So I use flexbox and set height: 100% for img elemeents.
Here is the fiddle: https://jsfiddle.net/norin89/h9q8dtbe/
In Chrome it looks fine:
But in Safari images itself seems to have correct size and proportions but wrapper element (li) is too wide - it's stretched to original width of the image (600px) rather than to the actual image size.
I've beed struggling with the styles but couldn't find a solution. It looks like a Safari bug for me. Any ideas for the solution to force Safari behave like other browsers?
Update: One solutions could be setting height directly on img - https://jsfiddle.net/norin89/h9q8dtbe/8/. It works in this simplify example but in real project whole div has to be positioned absolutely so it would require setting height on img and div itself. I'm looking for a solution where I can set the height only once and adjust img height automatically with height: 100%.