為什麼「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中文網其他相關文章！