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>