嵌套在具有顯式高度的列柔性容器中的行柔性容器在Chrome和Firefox中以不同方式呈現

Question

此簡單示例在Chrome中呈現的方式與Firefox或Edge中的呈現方式不同;在一種情況下，main flex項目會縮小以適合flex容器（設置爲視口高度），但在另一箇中則不會。是基於一些錯誤的渲染差異，還是其他東西？

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
main { 
 
    display: flex; 
 
    background: #f60; 
 
}

<main> 
 
    <!-- any element longer than the viewport --> 
 
    <img src="https://i.redd.it/e7a2rxhf1yrx.jpg"> 
 
</main>

編輯：a more clear example。

Answer 1

似乎是不同瀏覽器之間有關它們如何可以解釋柔性盒內柔性盒的屬性的不一致，但我設法通過將內盒的高度設置爲0，然後將柔性盒設置爲在外部彈性盒內增長100％（或1）。以下是使用您的代碼的示例。

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
main { 
 
    display: flex; 
 
    background: #f60; 
 
    height: 0; 
 
    flex-grow: 1; 
 
}

<main> 
 
    <!-- any element longer than the viewport --> 
 
    <img src="https://i.redd.it/e7a2rxhf1yrx.jpg"> 
 
</main>

Answer 2

看來flexbox不會縮小比例replaced elements像瀏覽器中的圖像（具有內在縱橫比），至少在這一刻！我相信這是發生在這裏的事情。

（我看過類似的東西here並會見了一個問題，用圖像作爲柔性項here）

解決方案： 一種解決方案是在柔性的項目使用max-height: 100%甚至可以是否應該使用flex-basis: 100%總是充滿父高度：

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
main { 
 
    display: flex; 
 
    background: #f60; 
 
    max-height: 100%; 
 
}

<main> 
 
    <!-- any element longer than the viewport --> 
 
    <img src="https://i.redd.it/e7a2rxhf1yrx.jpg"> 
 
</main>