How to make a Quasar q-page-container child use full height of its grandparent?

If you have a div inside a q-page, I found the proper way to do this is to let the div inherit the min-height CSS property from the q-page component.

I updated the fiddle to show it: https://jsfiddle.net/u39qbrpj/4/

#troublemaker {
  min-height: inherit;
  background-color: green;
}

I think q-page-container need a q-page.

So just replace your div by a q-page and it's work. here is your fiddle fixed: https://jsfiddle.net/uab1rnjh/2/

Or if you really want to work with a div.
You can do the trick with css: height: calc(100vh - 50px);
Here is your fiddle with a div: https://jsfiddle.net/yghL6so8/2/

In the documentation, you can see QPageContainer encapsulates a QPage. at: https://quasar.dev/layout/page#QPageContainer-API