Lajur grid menangguhkan saiz semula pada limpahan

Question

Saya mempunyai grid CSS 2×2 yang mengisi port pandangan penyemak imbas menggunakan kedudukan tetap. Ia kelihatan seperti ini:

-----------------
| |xxxxxxxxxxxxx|
-----------------
|x|             |
|x|             |
|x|             |
|x|             |
-----------------

Baris atas dan lajur kiri masing-masing sesuai dengan kandungannya dan bersaiz auto。底行和右列分别用于占用任何剩余空间并具有大小 1fr.

Sel Timur Laut dan Barat Daya (diisi dengan X dalam imej) kedua-duanya adalah ibu bapa Flex yang boleh ditatal. Ia mengandungi sebarang bilangan elemen kanak-kanak, dan nombor itu mungkin berubah secara dinamik. Saya menambah overflow 属性设置为 auto pada setiap sifat dan menggayakan bar skrol menggunakan set peraturan ini:

.scrollable::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.scrollable::-webkit-scrollbar-thumb {
  background: darkgray;
}

.scrollable::-webkit-scrollbar-track {
  background: #666666;
}

Apabila saya memuatkan halaman dalam Chrome pada macOS, bar skrol menindih kandungan sel barat daya. Kemudian apabila saya mengubah saiz tetingkap penyemak imbas, lajur kiri mengembang untuk menampung bar skrol (yang sudah muncul sebagai tindanan) dan ia bergerak ke kanan kandungan.

Saya mahu bar skrol tidak menutup kandungan sama sekali, dan saya benar-benar ingin menghapuskan peralihan reka letak pada acara ubah saiz yang tidak berkaitan. Adakah anda tahu bagaimana saya boleh mencapai matlamat ini?

Pen kod ini ialah contoh minimum yang boleh dihasilkan semula. Walau bagaimanapun, ia tidak kelihatan konsisten kepada saya. Apabila saya memuat semula halaman, kadangkala bar skrol dilindungi dan kadangkala lajur cukup lebar untuk bar skrol dipaparkan di sebelah kanan kandungan. Saya melihat liputan dan saiz yang salah menjadi lebih konsisten pada halaman kendiri ini.

Answer 1

Untuk mengelakkan ini, grid perlu mengemas kini dimensinya dan mengambil kira bar skrol. Soalan lain ialah bagaimana untuk melakukan ini hanya menggunakan css. Saya menganggapnya sebagai grid-template-columns 应用 animation dan nampaknya berkesan:

* {
  box-sizing:border-box;
}

#grid {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  animation: grid 200ms;
}

@keyframes grid {
  to {
    grid-template-columns: auto 2fr;
  }
}

#nw {
  background-color: green;
}

.scrollable {
  display: flex;
}

#ne {
  background-color: red;
  flex-direction: row;
  overflow-x: auto;
}

#sw {
  background-color: yellow;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-color: darkgray #666666;
  scrollbar-width: thick;
}

#se {
  background-color: blue;
}

.box {
  width: 4em;
  height: 4em;
  margin: 5px;
  border-radius: 5px;
  background-color: black;
  flex-shrink: 0;
}

.scrollable::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.scrollable::-webkit-scrollbar-thumb {
  background: darkgray;
}

.scrollable::-webkit-scrollbar-track {
  background: #666666;
}

<div id="grid">
  <div id="nw"></div>
  <div id="ne" class="scrollable">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div id="sw" class="scrollable">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div id="se"></div>
</div>

---

Jika anda mahu melakukannya dengan JavaScript:

setTimeout(() => grid.style.gridTemplateColumns = 'auto 2fr', 200)

* {
  box-sizing:border-box;
}

#grid {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr;
}

#nw {
  background-color: green;
}

.scrollable {
  display: flex;
}

#ne {
  background-color: red;
  flex-direction: row;
  overflow-x: auto;
}

#sw {
  background-color: yellow;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-color: darkgray #666666;
  scrollbar-width: thick;
}

#se {
  background-color: blue;
}

.box {
  width: 4em;
  height: 4em;
  margin: 5px;
  border-radius: 5px;
  background-color: black;
  flex-shrink: 0;
}

.scrollable::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.scrollable::-webkit-scrollbar-thumb {
  background: darkgray;
}

.scrollable::-webkit-scrollbar-track {
  background: #666666;
}

<div id="grid">
  <div id="nw"></div>
  <div id="ne" class="scrollable">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div id="sw" class="scrollable">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div id="se"></div>
</div>