Quasar Layout Two Column scrollbars - html

Question

I'm trying to create a layout similar to the one shown here. However I'm quite confused on how to successfully get something like this to work. I've attempted a number of solutions and options, all which have failed to do what I've drawn here. Are their any layout guru's out there that could help me achieve this look. The key here are getting the sticky areas to remain sticky and the scroll areas to have their scroll bars. Where I struggle is getting the divs to always expand to take up the vertical space remaining. The sidebar on the right can be a fixed width, however the rest is flexible to take up available space.
Desired results
This is what I have so far. The top bar is sticky as desired, but the individual scroll bars are not displaying for the two columns, unless I hard code a fixed height for the column divs. Which in my case i want them to take as much vertical space as possible.
DetailsPage.vue
<template>
<q-page class="flex" style="background: grey">
<div
class="col q-pa-md scroll"
style="background: rgba(240, 150, 50, 0.75); height:400px;"
>
{{ dummyText }}
</div>
<div
class="col-4 q-pa-md scroll"
style="
background: rgba(130, 140, 180, 0.75);
min-width: 200px;
max-width: 200px;
height:400px;
"
>
{{ dummyText }}
</div>
</q-page>
</template>
Current Results

Answer 1

You can use scroll-area and dynamic height accordingly. Please refer the following code.
<q-page class="flex" style="background: grey">
<div
class="col q-pa-md"
style="background: rgba(240, 150, 50, 0.75);"
>
<q-scroll-area
style="height: 87vh;"
>
<div v-for="n in 100" :key="n" class="q-pa-xs">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</div>
</q-scroll-area>
</div>
<div
class="col-4 q-pa-md "
style="
background: rgba(130, 140, 180, 0.75);
min-width: 200px;
max-width: 200px;
"
>
<div class="q-pa-xs">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</div>
<q-scroll-area
style="height: 65vh;"
>
<div v-for="n in 100" :key="n" class="q-pa-xs">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</div>
</q-scroll-area>
</div>
</q-page>