使用调整大小功能不缩小轨道

Question

我想用CSS grid 模拟拆分窗格的行为，但是当我缩小“顶部”可调整大小的 div 时，“底部”div 不会向上，在顶部之间留下难看的空白和底部 div。

我在 Brave 0.70.122（基于 Chromium 78.0.3904.87）和 Firefox 71（两者都在 Ubuntu 64 位上，如果重要的话）都有问题。

如何让两个 div 填满整个可用空间？是否有我不知道的 CSS 属性可以设置？我可以设置grid-template-rows: auto 1fr;，但这会将顶部 div 设置为最小尺寸，我希望最初设置为 75%（但底部 div 不会超过剩余的 25%）。

div {
  /* To visualize boundaries */
  border: 1px solid;
}

#main {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 3fr 1fr;  /* 3/4 split */
}

#top {
  grid-area: 1 / 1 / span 1 / span 1;
  resize: vertical;
  overflow: auto;
}

#bottom {
  grid-area: 2 / 1 / span 1 / span 1;
}

<div id="main">
  <div id="top">Top</div>
  <div id="bottom">Bottom</div>
</div>

Answer 1

看起来一旦浏览器呈现轨道大小（在本例中为 3fr 1fr），它们就会变成固定长度。所以resize工具只能缩小轨道的内容，不能缩小轨道本身。

尝试不同的方法。

而不是这个：

#main {
  grid-template-rows: 3fr 1fr;
}

试试这个：

#main {
  grid-template-rows: auto 1fr;
}

#top {
  height: 75vh;
}

#main {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

#top {
  height: 75vh;
  resize: vertical;
  overflow: auto;
  background-color: lightgreen;
}

#bottom {
  background-color: orangered;
}

body {
  margin: 0;
}

<div id="main">
  <div id="top">Top</div>
  <div id="bottom">Bottom</div>
</div>

jsFiddle demo