Quasar container child height

How to make the green region #troublemaker expand to 100% height of its grandparent (minus header)?

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quasar@^1.0.3/dist/quasar.min.css">
<script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.3/dist/quasar.umd.min.js"></script>

<div id="q-app">
  <q-layout view="hHh lpR fFf">
    <q-header elevated class="bg-primary text-white">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="left = !left"> </q-btn>
        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
          </q-avatar>
          Title
        </q-toolbar-title>
      </q-toolbar>
    </q-header>
    <q-drawer v-model="left" side="left" bordered>
      <!-- drawer content -->
    </q-drawer>

    <q-page-container>
      <q-page id="troublemaker" style="background-color: green">
      </q-page>
    </q-page-container>

  </q-layout>
</div>

JavaScript

new Vue({
  el: '#q-app',
  data: function() {
    return {
      left: true
    }
  }
})