Firefox中的Flexbox子100％高度行為

Question

我已經被困了一個多星期，找不到關於這個話題的任何適當的解決方案或解釋。

我在這里有這個基於 flexbox 的水平滾動輪播： https ://codevelop.at/flexbox/single.php

它在 Chrome 中按預期工作，中間有正確的空間（邊距）。 如果您在 Firefox 中調用相同的 URL，它會給我這些很大的利潤。 這是由於主標簽內<section>標簽上的height: 100%所致。 如果我刪除它，它可以工作，但是圖像沒有正確調整大小。

有任何想法嗎？ 提前致謝

鉻（按預期）：

Firefox（我卡住的地方）：

Answer 1

您的問題是 CSS 的這一部分：

.single-project .second-section img, .single-project .third-section img, .single-project .fourth-section img, .single-project .fifth-section img {
    height: 100%;
    width: auto;
}

在這種情況下，Firefox 與 Flexbox 結合使用似乎無法像 Chrome 那樣正確計算寬度。 它占用了原始圖像寬度的空間，並且無法正確重繪。 這就是您所看到的太多空白。

你可以嘗試這樣的事情：

width: 400px;
height: 100%;
object-fit: cover;

雖然這不是一個完美的解決方案，但它是一個快速的解決方案。 您可以使用 Javascript 計算完美的圖像尺寸以獲得更理想的解決方案。

那是一個棘手的問題。 ;-)