网格列在溢出时延迟调整大小

Question

我有一个 2×2 CSS 网格，它使用固定定位填充浏览器视口。它看起来像这样：

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

顶行和左列各自适合其内容并且大小为auto。底行和右列分别用于占用任何剩余空间并具有大小 1fr。

东北和西南单元格（图中充满了 X）都是可滚动的 Flex 父单元。它们包含任意数量的子元素，并且该数量可能会动态变化。我将每个属性的 overflow 属性设置为 auto 并使用这些规则集设置滚动条的样式：

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

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

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

当我在 macOS 上的 Chrome 中加载页面时，滚动条覆盖在西南单元格的内容上。然后，当我调整浏览器窗口大小时，左列会展开以容纳滚动条（它已经显示为覆盖层），并且它会移动到内容的右侧。

我希望滚动条根本不覆盖内容，并且我真的很想消除不相关的调整大小事件上的布局移位。你知道我如何实现这些目标吗？

此 Codepen 是一个最小的可重现示例。然而，它对我来说并不一致。当我重新加载页面时，有时滚动条被覆盖，有时该列已经足够宽，滚动条可以显示在内容的右侧。我在这个独立页面上看到了错误的覆盖和尺寸更一致。

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>