I’ve had various issues with trying to get a responsive Scroll Area.
This post was helpful: https://forum.quasar-framework.org/topic/3756/best-practice-setting-up-q-scroll-area
But it still wasn’t working for me, even when I had the flex columns working as intended.
The key I found was needing to have an absolute height set on at least one parent element. What I ended up doing was attaching a Style-Fn to the q-page element…
<q-page class="column" :style-fn="styleFn">
And then a function that sets absolute height instead of the default min-height
styleFn(offset, height) {
let pageheight = height - offset;
console.log("PageHeight: " + pageheight);
return "height: " + pageheight + "px";
}
After that I found that the scroll area sized properly simply by adding the col class.
I posted this because it vexed me for ages and I couldn’t find a clear solution.