Les colonnes de la grille retardent le redimensionnement en cas de débordement

Question

J'ai une grille CSS 2 × 2 qui remplit la fenêtre d'affichage du navigateur en utilisant un positionnement fixe. Cela ressemble à ceci :

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

La rangée du haut et la colonne de gauche correspondent chacune à leur contenu et sont dimensionnées auto。底行和右列分别用于占用任何剩余空间并具有大小 1fr.

Les cellules Nord-Est et Sud-Ouest (remplies de X dans l'image) sont toutes deux des parents Flex déroulants. Ils contiennent un nombre illimité d'éléments enfants, et ce nombre peut changer de manière dynamique. J'ajoute overflow 属性设置为 auto à chaque propriété et stylise la barre de défilement en utilisant ces ensembles de règles :

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

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

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

Lorsque je charge la page dans Chrome sur macOS, la barre de défilement recouvre le contenu de la cellule sud-ouest. Ensuite, lorsque je redimensionne la fenêtre du navigateur, la colonne de gauche s'agrandit pour accueillir la barre de défilement (qui apparaît déjà en superposition) et se déplace vers la droite du contenu.

Je souhaite que la barre de défilement ne couvre pas du tout le contenu et j'aimerais vraiment éliminer le changement de mise en page lors d'événements de redimensionnement non pertinents. Savez-vous comment je peux atteindre ces objectifs ?

Ce codepen est un exemple minimal reproductible. Cependant, cela ne me semble pas cohérent. Lorsque je recharge la page, parfois la barre de défilement est couverte et parfois la colonne est suffisamment large pour que la barre de défilement apparaisse à droite du contenu. Je constate que la couverture et le dimensionnement sont plus cohérents sur cette page autonome.

Answer 1

Pour éviter cela, la grille doit mettre à jour ses dimensions et prendre en compte les barres de défilement. Une autre question est de savoir comment procéder en utilisant uniquement du CSS. J'y ai pensé comme grid-template-columns 应用 animation et ça semble fonctionner :

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

---

Si vous souhaitez le faire avec 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>