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