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

Flexbox 在不同浏览器中的列反转行为

Flexbox 提供了强大的布局系统，但在跨浏览器实现某些属性时会出现不一致。其中一个问题涉及 Firefox、Edge 和 IE 中的 flex-direction: column-reverse 属性的行为。

问题

考虑以下 HTML 和 CSS代码：

<code class="html"><div id="list">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div></code>

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

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

预期行为

当此代码在 Chrome 中显示时，它会创建一个可以向上滚动查看的垂直项目列表之前的条目。

意外行为

但是，在 Firefox、Edge 和 IE/Edge 中，滚动条显示为禁用。

原因

此行为源于上述浏览器中的错误。当使用flex-direction:column-reverse时，滚动条仅在Chrome中起作用。如果将column-reverse更改为简单的column，滚动条将在所有浏览器中工作。

其他信息

有关此错误的更多详细信息，请参阅以下内容资源：

• Bug 1042151 - https://bugzilla.mozilla.org/show_bug.cgi?id=1042151
• Philip Walton / flexbugs - 列反转和溢出不是可滚动 https://github.com/philipwalton/flexbugs/issues/618

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