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

我有一个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是一个最小的可重复的例子。然而，它的行为对我来说并不一致。当我重新加载页面时，有时滚动条被覆盖，有时列已经足够宽，滚动条可以出现在内容的右边。我在这个standalone page上看到了更一致的糟糕的覆盖和大小调整。

为了防止这种情况，网格需要更新其维度并考虑滚动条。另一个问题是如何只使用css。我想到将animation应用于grid-template-columns，它似乎可以工作：

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

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

1条答案

相关问题

热门标签

最新问答