[Bug] q-drawer contents only shown on horizontal iPad

[mesqueeb]

Describe the bug
The q-drawer doesn't show anything with my specific setup when opened on "desktop".
However, opening it on "horizontal iPad" does make it properly show up.
(I was originally only developing on horizontal iPad view, that's why I found out about this later)

See Gif:

Codepen/jsFiddle (required)
I have a q-drawer vue file you can drop into any quasar project
MyQDrawer.vue.zip

Or copy the full code down below.

To Reproduce
Steps to reproduce the behavior:

1. Download the MyQDrawer zip
2. Drop it into a new quasar project
3. open the page on desktop view
4. See error

Expected behavior
The drawer contents should be shown

Screenshots
See gif above

Platform (please complete the following information):
OS: macOS
Node: unrelated
NPM: unrelated
Yarn: unrelated
Browsers: Chrome
iOS: unrelated
Android: unrelated
Electron: unrelated

Full code of zip file:

<template>
<q-drawer
  side="left"
  :mini="drawerMini"
  v-model="drawerOpen"
  bordered
  show-if-above
  persistent
  content-class="admin-drawer"
  :width="250"
>
  <div class="admin-nav-menu">
    <q-toolbar>
      <q-btn flat round dense icon="menu" @click="toggleMini" />
      <q-toolbar-title>
        The toolbar won't show
      </q-toolbar-title>
    </q-toolbar>
    <q-scroll-area class="fit">
      <q-list padding>
        <q-expansion-item
          label="アカウント＆会社"
          expand-separator
          default-opened
          dark
        >
          <q-list class="_sub-list">
            <q-item clickable v-ripple to="/admin/account" exact>
              <q-item-section avatar>
                <q-icon name="account_circle" />
              </q-item-section>
              <q-item-section>This toolbar</q-item-section>
              <q-item-section avatar>
                <q-icon color="negative" name="error" />
              </q-item-section>
            </q-item>
            <q-item clickable v-ripple to="/admin/users" exact :disable="pendingInfo">
              <q-item-section avatar>
                <q-icon name="group" />
              </q-item-section>
              <q-item-section>is only</q-item-section>
            </q-item>
            <q-item clickable v-ripple to="/admin/corporateInfo" exact>
              <q-item-section avatar>
                <q-icon name="business" />
              </q-item-section>
              <q-item-section>showing when</q-item-section>
              <q-item-section avatar>
                <q-icon color="negative" name="error" />
              </q-item-section>
            </q-item>
            <q-item clickable v-ripple to="/admin/notifications" exact>
              <q-item-section avatar>
                <q-icon name="notifications" />
              </q-item-section>
              <q-item-section>ipad horizontal</q-item-section>
            </q-item>
          </q-list>
        </q-expansion-item>

        <q-item clickable v-ripple to="/admin/contracts" exact :disable="pendingInfo">
          <q-item-section avatar>
            <q-icon name="assignment_turned_in" />
          </q-item-section>
          <q-item-section>
            is selected
          </q-item-section>
        </q-item>
        <q-expansion-item
          label="製品"
          expand-separator
          default-opened
          dark
        >
          <q-list class="_sub-list">
            <q-item clickable v-ripple to="/admin/products/batteries" exact :disable="pendingInfo">
              <q-item-section avatar>
                <q-icon name="battery_full" />
              </q-item-section>
              <q-item-section>otherwise</q-item-section>
            </q-item>
            <q-item clickable v-ripple :disable="pendingInfo">
              <q-item-section avatar>
                <q-icon name="wb_sunny" />
              </q-item-section>
              <q-item-section>on desktop</q-item-section>
            </q-item>
            <q-item clickable v-ripple :disable="pendingInfo">
              <q-item-section avatar>
                <q-icon name="offline_bolt" />
              </q-item-section>
              <q-item-section>nothing</q-item-section>
            </q-item>
            <q-item clickable v-ripple :disable="pendingInfo">
              <q-item-section avatar>
                <q-icon name="whatshot" />
              </q-item-section>
              <q-item-section>is showing up</q-item-section>
            </q-item>
            <q-item clickable v-ripple :disable="pendingInfo">
              <q-item-section avatar>
                <q-icon name="power" />
              </q-item-section>
              <q-item-section>IDK why</q-item-section>
            </q-item>
            <q-item clickable v-ripple :disable="pendingInfo">
              <q-item-section avatar>
                <q-icon name="more_horiz" />
              </q-item-section>
              <q-item-section>💥😃🔫</q-item-section>
            </q-item>
          </q-list>
        </q-expansion-item>
        <q-item clickable v-ripple to="/" exact>
          <q-item-section avatar>
            <q-icon name="home" />
          </q-item-section>
          <q-item-section>ホームへ</q-item-section>
        </q-item>
      </q-list>
    </q-scroll-area>
  </div>
</q-drawer>
</template>

<script>
export default {
  name: 'my-q-drawer',
  data () {
    return {
      drawerMini: false,
      drawerOpen: true
    }
  },
  computed:
  {
    pendingInfo () { return false }
  },
  methods:
  {
    toggleMini () {
      this.drawerMini = !this.drawerMini
    }
  }
}
</script>

[mesqueeb]

You need to manually apply height 100% to the wrapper <div class="admin-nav-menu">