Why am I getting different behavior in Safari and Chrome with flexbox?

Question

I am displaying a row of images. Here is my html:

<div class="flex">
  <img src="img1.jpg"/>
  <img src="img2.jpg"/>
  <img src="img3.jpg"/>
  <img src="img4.jpg"/>
</div>

Here is my css:

.flex {
  display: flex
}

img {
  height: auto;
}

I want my images to display in a row. I have not given the imgs any width, so on Chrome the imgs take up their natural width and push out bigger than then screen. This is how I want it to work. With Safari, they flexbox will only take up the full viewport width. I have tried setting an image width, flex-basis, but cannot make Safari use more than just the visible screen. Is there a flexbox issue that I don't know about? What else can I do?

Answer 1

Looks like this is a bug in Safari. Try adding flex-shrink: 0 to img.

img {
    height: auto;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
}

With webkit prefix to support older Safari browsers -- I'd add it to .flex too as james suggests (note to self: upgrade Safari).