Rasterspalten verzögern die Größenänderung bei Überlauf

Question

Ich habe ein 2×2-CSS-Raster, das das Browser-Ansichtsfenster mit fester Positionierung ausfüllt. Es sieht so aus:

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

Die obere Zeile und die linke Spalte passen jeweils zu ihrem Inhalt und haben die Größe auto。底行和右列分别用于占用任何剩余空间并具有大小 1fr.

Die Nordost- und Südwestzellen (im Bild mit Xs gefüllt) sind beide scrollbare Flex-Eltern. Sie enthalten eine beliebige Anzahl untergeordneter Elemente, und diese Anzahl kann sich dynamisch ändern. Ich füge overflow 属性设置为 auto zu jeder Eigenschaft hinzu und gestalte die Bildlaufleiste mithilfe dieser Regelsätze:

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

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

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

Wenn ich die Seite in Chrome unter macOS lade, überlagert die Bildlaufleiste den Inhalt der südwestlichen Zelle. Wenn ich dann die Größe des Browserfensters ändere, wird die linke Spalte erweitert, um die Bildlaufleiste (die bereits als Überlagerung angezeigt wird) aufzunehmen, und sie wird nach rechts vom Inhalt verschoben.

Ich möchte, dass die Bildlaufleiste den Inhalt überhaupt nicht verdeckt, und ich möchte wirklich verhindern, dass sich das Layout bei irrelevanten Größenänderungsereignissen verschiebt. Wissen Sie, wie ich diese Ziele erreichen kann?

Dieser Codepen ist ein minimal reproduzierbares Beispiel. Allerdings sieht es für mich nicht einheitlich aus. Wenn ich die Seite neu lade, ist manchmal die Bildlaufleiste verdeckt und manchmal ist die Spalte breit genug, dass die Bildlaufleiste rechts vom Inhalt angezeigt wird. Ich sehe, dass auf dieser eigenständigen Seite die falsche Abdeckung und Größe konsistenter ist.

Answer 1

为了防止这种情况，网格需要更新其尺寸并考虑滚动条。另一个问题是如何仅使用 css 来做到这一点。我想到为 grid-template-columns 应用 animation，它似乎有效：

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

---

如果你想用 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>