Track not shrinking with resize function

Question

I want to mimic a split pane behavior with CSS grid but the "bottom" div doesn't go up when I shrink the "top" resizable div, leaving an unsightly void between the top and bottom div.

I have the issue with both Brave 0.70.122 (based on Chromium 78.0.3904.87) and Firefox 71 (both on Ubuntu 64 bits, if that matters).

How can I get both divs to fill the whole available space? Is there a CSS property I can set that I'm not aware of? I can set the grid-template-rows: auto 1fr; but that sets the top div to the minimum size, where I'd like to have it initially to 75% (but then the bottom div doesn't grow past the remaining 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

It looks like once the browser renders the track sizes (3fr 1fr, in this case), those become fixed lengths. So the resize tool can only shrink the content of the track, but not the track itself.

Try a different approach.

Instead of this:

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

Try this:

#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