为什么 `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中文网其他相关文章！