Flexbox 项目不包装最新的 Safari 和 Chrome（在 flex-container 上使用 max-width，在 flex-items 上使用 flex-basis）

Question

关于 Safari 中 flexbox 的实施问题，有很多问题，但我找不到解决我的问题的解决方案。 以下代码在 Firefox 中运行良好：如果有足够的空间，两幅图像将显示在一行中，否则第二幅图像会在第一幅图像下方换行。 在 Safari 和 Chrome 中，无论可用空间有多少，第二张图片都会换行。 此外，堆叠图像之间存在巨大的垂直间隙：

 div { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; max-width: 42em; padding-bottom: 1em; } img { max-width: 25em; margin-bottom: 1em; -webkit-flex-basis: 14em; flex-basis: 14em; -webkit-flex-grow: 1; flex-grow: 1; }

 <div style=""> <img src="http://www.fillmurray.com/480/320"> <img src="http://www.fillmurray.com/480/320"> </div>

小提琴： https://jsfiddle.net/madamadam/ywkrxLv0/25/

非常感谢任何帮助！

Answer 1

看来这个问题与被认为执行可用空间计算的初始图像宽度有关。 添加width:0似乎解决了这个问题

 div { display: flex; flex-wrap: wrap; max-width: 42em; padding-bottom: 1em; } img { max-width: 25em; width:0; margin-bottom: 1em; flex-basis: 14em; flex-grow: 1; }

 <div style=""> <img src="http://www.fillmurray.com/480/320"> <img src="http://www.fillmurray.com/480/320"> </div>