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>

score 1 · Accepted Answer · answered Dec 29 '19 at 03:00

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

answered Dec 29 '19 at 03:00

Michael Benjamin

346,931
104
581
701

Awesome :) So if I understood correctly, the `#main { ...; grid-template-rows: auto 1fr; }` gives minimum space to the top div, and *then* the `#top { height: 75vh; ...; }` gives it back 75% of viewport height, correct? I tried to replace `75vh` with `75%` but the result was not the same. – Matthieu Dec 29 '19 at 07:10
1

A grid row set to `auto` means the height is content-based, or whatever height you set to the grid item. Then you can control the height of the row at the grid item level. – Michael Benjamin Dec 29 '19 at 11:54
1

To understand why `75vh` and `75%` don't necessarily do the same thing, see this post: https://stackoverflow.com/a/31728799/3597276 – Michael Benjamin Dec 29 '19 at 11:56
Thanks for the insights (and another +1 from me); but I tried to force the size of the `#main { height: 600px; }` but `#top { height: 75%; }` is still not working. Are grid items handled differently in that regard? – Matthieu Dec 30 '19 at 13:52

Track not shrinking with resize function

1 Answers1