Stuck on setting pull-to-request full-height

[Pollie]

Hello,

I’m a little stuck on the “design” / helpers classes of flex.
I can’t figure out how to flex the pull-to-refresh (& other stuff) over the whole remaining screen.

So currerently if you pull down on 1 it’ll work fine, but if you try to pull down where 2 is marked it won’t work.
My goal is to have both places work ofcourse.

I have tried a lot without success, I’ll show 1 thing that almost worked further down below but also show my problem with it.

Code:

<template>
    <q-page padding>
        <Header/>

        <q-pull-to-refresh :handler="refreshData">
            <div>
                <div v-if="opponent">
                    <ChallengeCard :opponent="opponent" v-for="challenge in challenges" :challenge="challenge" :key="challenge.id" />
                </div>
            </div>
        </q-pull-to-refresh>
    </q-page>
</template>

What I have tried that came close but broke something else:

Code:

<template>
    <q-page padding class="row">
        <Header/>

        <q-pull-to-refresh :handler="refreshData" class="flex">
            <div>
                <div v-if="opponent">
                    <ChallengeCard :opponent="opponent" v-for="challenge in challenges" :challenge="challenge" :key="challenge.id" />
                </div>
            </div>
        </q-pull-to-refresh>
    </q-page>
</template>

Situation:
1 & 2 are working as I would like to but 3 is not working. Neither on the same height of the content as down below. I have tried a lot to stretch over the whole width with the use of flex and also the use of width 100% etc…

I’m having such a struggle and after trying for a couple of hours I’m clueless. That’s why I’m reaching out for any clues or help.

Thanks in advance!