Mengapakah `flex-direction: column-reverse` melumpuhkan bar skrol dalam Firefox, Edge dan IE/Edge?

Gelagat terbalik lajur Flexbox dalam Penyemak Imbas Berbeza

Flexbox menawarkan sistem reka letak yang berkuasa, tetapi ketidakkonsistenan timbul apabila melaksanakan sifat tertentu merentas penyemak imbas. Satu isu sedemikian melibatkan gelagat arah flex: sifat lajur terbalik dalam Firefox, Edge dan IE.

Isunya

Pertimbangkan HTML dan CSS berikut kod:

<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>

Gelagat Jangkaan

Apabila kod ini dipaparkan dalam Chrome, ia mencipta senarai menegak item yang boleh ditatal ke atas untuk melihat entri sebelumnya.

Gelagat Tidak Dijangka

Walau bagaimanapun, dalam Firefox, Edge dan IE/Edge, bar skrol kelihatan dilumpuhkan.

Sebab

Tingkah laku ini berpunca daripada pepijat dalam penyemak imbas yang disebutkan di atas. Apabila flex-direction: column-reverse digunakan, bar skrol hanya berfungsi dalam Chrome. Jika anda menukar lajur-terbalik kepada lajur sahaja, bar skrol akan berfungsi dalam semua penyemak imbas.

Maklumat Tambahan

Untuk butiran lanjut tentang pepijat ini, rujuk perkara berikut sumber:

• Pepijat 1042151 - https://bugzilla.mozilla.org/show_bug.cgi?id=1042151
• Philip Walton / flexbugs - Lajur-terbalik dan limpahan-y tidak boleh ditatal https://github.com/philipwalton/flexbugs/issues/618

Atas ialah kandungan terperinci Mengapakah `flex-direction: column-reverse` melumpuhkan bar skrol dalam Firefox, Edge dan IE/Edge?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!