为什么“flex-direction:column-reverse”在 Firefox、Edge 和 IE 中禁用滚动？

Firefox、Edge 和 IE 中的 Flexbox 列反转问题

创建响应式应用程序时，通常使用 Flexbox 来显示内容。在某些情况下，您可能希望在屏幕尺寸发生变化时反转元素的顺序。虽然这在 Chrome 中可以无缝运行，但在 Firefox、Edge 和 Internet Explorer 中会出现一个令人费解的问题。

当使用 flex-direction: column-reverse 反转项目顺序时，该问题变得明显。在 Chrome 中，滚动条的行为符合预期，允许用户向上滚动以查看之前的项目。但是，在受影响的浏览器中，滚动条会出现但保持禁用状态。

为了演示此问题，让我们检查以下代码：

<code class="css">#list {
  display: flex;
  flex-direction: column-reverse;
  height: 250px;
  overflow-y: scroll;
  border: 1px solid black;
}

.item {
  flex: 1;
  padding: 2em;
  border: 1px dashed green;
}</code>

使用此代码时，您会注意到Firefox、Edge 和 IE 中存在上述问题。

根本原因和解决方法

此问题源于受影响浏览器中存在的错误。具体来说，当使用flex-direction:column-reverse和overflow-y:auto时，滚动条无法按预期工作。

作为解决方法，您可以使用column而不是flex-direction:column-reverse 。这种方法将实现相同的视觉效果，并确保滚动条在所有支持的浏览器中正常工作。

其他信息

有关此问题的更多详细信息和见解，请参阅到以下资源：

• [Flexbugs - 列反转和溢出不可滚动](https://github.com/philipwalton/flexbugs/issues/104)
• [Bug 1042151 - flex-direction：column-reverse（或“flex-direction：column；justify-content：flex-end”）与溢出-y：auto不可滚动]（https://bugzilla.mozilla.org/ show_bug.cgi?id=1042151)

以上是为什么“flex-direction:column-reverse”在 Firefox、Edge 和 IE 中禁用滚动？的详细内容。更多信息请关注PHP中文网其他相关文章！