為什麼 `flex-direction: column-reverse` 會導致 Firefox、Edge 和 IE 中的滾動問題？

Flexbox column-reverse 在Firefox、Edge 和IE 中的滾動問題

當嘗試建立一個包含div 列表的響應式應用程式時在較大的螢幕上以向上滾動的方式顯示，在較小的螢幕上以相反順序向下滾動的方式顯示，使用Flexbox 屬性“column-reverse”似乎是理想的解決方案。然而，它在 Chrome 以外的瀏覽器中導致了一個特殊的問題。

HTML 結構與 CSS 樣式

HTML 由一個「清單」div 組成，其中包含一系列「項目」div。 CSS 將「display：flex」和「flex-direction：column-reverse」指派給「list」div，確保項目垂直堆疊並反轉。高度和“overflow-y”屬性啟用了垂直滾動，並添加了邊框以提高視覺清晰度。

跨瀏覽器捲動行為

在 Chrome 中，「清單」 ' div 顯示了一個功能性捲軸，允許使用者向上捲動以查看先前的項目。然而，在 Firefox、Edge 和 IE11 中，滾動條出現但仍處於停用狀態，無法滾動。

錯誤說明

調查顯示此行為是 Firefox 中的錯誤、Edge 和 IE11。當使用'flex-direction:column-reverse'和'overflow-y:auto'時，滾動條不存在。

解決方案

如果'column'屬性使用而不是“column-reverse”，滾動條在所有瀏覽器中都可以使用。 「justify-content: flex-end」屬性對於對齊「list」div 底部的項目以實現正確的向下滾動也是必要的。

其他資訊

有關此問題的更多詳細資訊可以在以下資源中找到：

• Bug 1042151 - flex-direction : column-reverse (或"flex-direction:column; justify-content:flex-end ") 帶有溢出-y：自動不可滾動
• Philip Walton / flexbugs - 列反轉和溢出-y 不可捲動

以上是為什麼 `flex-direction: column-reverse` 會導致 Firefox、Edge 和 IE 中的滾動問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！