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>