Full-height in maximized dialog doesn't fit the page properly [Solved]

[yo]

I want to put a full-height scroll-area inside a maximized dialog (including a q-card), but the the full-height doesn’t consider the size of the top bar and creates another scroll.

Is this a bug or am I doing something wrong ?

I made a Codepen to show my problem but I don’t have the pro version, so just replace the HTML of the Example–Maximized’s Codepen.

<!--
  Forked from:
  https://quasar.dev/vue-components/dialog#Example--Maximized
-->
<div id="q-app">
  <div class="q-pa-md q-gutter-sm">
    <q-btn label="Maximized" color="primary" @click="dialog = true"></q-btn>

    <q-dialog
      v-model="dialog"
      persistent
      :maximized="maximizedToggle"
      transition-show="slide-up"
      transition-hide="slide-down"
    >
      <q-card class="bg-primary text-black">
        <q-bar>
          <q-space ></q-space>

          <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
            <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">Minimize</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
            <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">Maximize</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="close" v-close-popup>
            <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
          </q-btn>
        </q-bar>

        <q-card-section class="col bg-white full-height">
          <div class="column full-height">
            <h2>Super Title</h2>
            <q-scroll-area
              class="col"
              visible
            >
              <p v-for="index in 21" :key="index">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.
              </p>
            </q-scroll-area>
          </div>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</div>

[yo]

I have found the problem in 5 minutes (after posting)
“Tourner 7 fois sa langue dans sa bouche avant de parler”

I had just to add a <div class=“column full-height”> directly under my q-card :

<!--
  Forked from:
  https://quasar.dev/vue-components/dialog#Example--Maximized
-->
<div id="q-app">
  <div class="q-pa-md q-gutter-sm">
    <q-btn label="Maximized" color="primary" @click="dialog = true"></q-btn>

    <q-dialog
      v-model="dialog"
      persistent
      :maximized="maximizedToggle"
      transition-show="slide-up"
      transition-hide="slide-down"
    >
      <q-card class="bg-primary text-black full-height">
        <div class="column full-height">
          <q-bar>
            <q-space ></q-space>

            <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
              <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">Minimize</q-tooltip>
            </q-btn>
            <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
              <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">Maximize</q-tooltip>
            </q-btn>
            <q-btn dense flat icon="close" v-close-popup>
              <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
            </q-btn>
          </q-bar>

          <q-card-section class="col bg-white full-height">
            <div class="column full-height">
              <h2>Super Title</h2>
              <q-scroll-area
                class="col"
                visible
              >
                <p v-for="index in 21" :key="index">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.
                </p>
              </q-scroll-area>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</div>