How to make an element fill the remaining viewport height?

Question

I'd like to use CSS Grid. Something like this I think…

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto [whatever's left of the vh] auto auto;
  position: relative;
}

Answer 1

Set the viewport with display: flex and height: 100vh and add to the last element flex-grow: 1

Here is a small fiddle :

https://jsfiddle.net/omA123/y4j9nhpy/