New Dec 13, 2025

Quasar to stretch full height

Libraries, Frameworks, etc. All from Newest questions tagged vue.js - Stack Overflow View Quasar to stretch full height on stackoverflow.com

I am building a chat view. On mobile devices, i want to span the parent div containing the <q-scroll-area> as big as possible using a column flex container. Unfortunately the q-scoll-area seems to break when it is inside a .col (which is a flex class intended to take full height when set inside a .column parent).

what i want as a minimal example:

<template>
  <div class="column col fit">
    <div class="col">
      <q-scroll-area class="q-pa-md fit">
        <div v-for="dummymessage of 50" :key="dummymessage"> message: {{ dummymessage }}</div>
      </q-scroll-area>
    </div>
    <div class="col-auto">INPUT</div>
  </div>
</template>

Now i dont see any output inside the q-scroll-area. Rendered output.

The weird thing is, that the divs appear in the inspector:

Inspector displaying the DOM including the dummymessages The problem seems to be that q-scroll-area requires the parent to provide an explicit height.

The following example would work, but in order to have a responsive view i would need to calculate heights which is an option, but only if i understand why my dream approach does not work.

<template>
  <div class="column col fit">
    <div class="" style="height: 400px">
      <q-scroll-area class="q-pa-md fit">
        <div v-for="dummymessage of 50" :key="dummymessage"> message: {{ dummymessage }}</div>
      </q-scroll-area>
    </div>
    <div class="col-auto">INPUT</div>
  </div>
</template>

Output screenshot: Screenshot of the rendered result Any ideas on this?

Update: When i go to the browser inspector, find the scroll-area container in the DOM q-scrollarea__container scroll relative-position and toggle the position: relative off and then back on, the desired behaviour is there. This feels like a bug on quasar's site or a misuse on my side.

Update2: After trying to reproduce inside a playground i could not reproduce the problem.

I now know the reason why it does not work by default. Quasar sets their heights on to min-height: someInternallyCalculatedHeight. q-scroll-area requires an explicit height: someValue to be defined. The in depth answer lies somewhere in how q-scroll-area is designed. Still seeking for better ideas.

Scroll to top