为什么我在Safari和Chrome中使用flexbox获得不同的行为？

Question

我正在显示一行图像.这是我的html:

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

这是我的css:

.flex {
  display: flex
}

img {
  height: auto;
}

我想让我的图像连续显示.我没有给你任何img小号任何宽度,等等Chrome的img.就拿他们的自然宽比,然后屏幕推出更大.这就是我希望它的工作方式.有了Safari,它们flexbox只会占据整个viewport宽度.我已经尝试设置图像宽度,flex-basis,但不能Safari仅仅使用可见屏幕.有一个flexbox我不知道的问题吗？我还可以做些什么？

Answer 1

看起来这是 Safari 中的一个错误。尝试添加flex-shrink: 0到img.

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

使用 webkit 前缀来支持旧版 Safari 浏览器——我也会按照 james 的建议添加它.flex（自我提示：升级 Safari）。