search

philipwalton / flexbugs

A community-curated list of flexbox issues and cross-browser workarounds for them.
MIT License
13.63k stars 495 forks source link

webkit not honouring flex-basis percentage width with images #273

Open ThePeach opened 5 years ago

ThePeach commented 5 years ago

Came across this one, and cannot figure out if it's been reported yet and where it should be filed under (I would somehow expect this to have been reported already, if not I'll be happy to report this upstream).

Anyhow, here's the live demo: https://codepen.io/ThePeach/pen/QWLpVEO?editors=1100 including a workaround that works on Chrome, but not on Safari. With Safari I hit a problem that the max-width does not respect the ratio of the image.

On Firefox, no probs whatsoever.

Tested with:

all under OSX 10.14.6

ThePeach commented 5 years ago

in the meantime, I've refined the workaround, and wrapped the image in a <div> tag which made the webkit workaround stick.