Flexbox and q-scroll-area's height

[yo]

Hello, I’m trying out to place a scroll area at the bottom left

I have tried many way, i feel like i don’t handle the problem in the right way.
I have notice that if I don’t put “full-height” on the row’s div, the scroll area has no height (doesn’t appear), but if I put it, it creates a half full-height button and half full-height scroll-area.

And if i use height: 100% in scroll-area, it is overflow the page height and creates a scroll on the whole page.

Maybe I should try to separate the scroll area and put it in a component ?

<template>
  <q-page class="row no-wrap">
    <div class="col q-ma-md">
      ... some components
    </div>
    <div class="col-8 q-ma-md">
      <div class="row full-height"> 
        <q-btn-dropdown
          class="col-2 q-mb-sm"
             ...
            >
            ...
        </q-btn-dropdown>
        <q-scroll-area
          :thumb-style="thumbStyle"
          class="col-12 q-pa-sm full-height full-width"
          visible
        > <!-- style="height: 100%; weight: 100%" ??? -->
          <div v-html="fileHTML" style="" id="source-code"></div>
        </q-scroll-area>
      </div>
    </div>
  </q-page>
</template>

nb : I have also a problem with q-scroll-area, if I put “horizontal” I don’t have scroll on vertical, and if I don’t put it, I only have the vertical even when the horizontal is needed ! Should I create a post about it ?

[tof06]

@yo Do you want something like this ?
https://codepen.io/cp-tof06/pen/bGdKXpW

The key here, for your right column with dropdown & scrollarea, is to use a column class, not a row

[yo]

@tof06 How yeah that’s perfect ! Thank you !
I have search in documentation but I haven’t find any explanation about column, do you have some links about it ?

[tof06]

@yo column class is described here : https://quasar.dev/layout/grid/column

[yo]

@tof06 thx, apparently I’m blind ><

[robertopaes]

@tof06 I’m trying to use a scroll area like in your solution but inside of an expansion item. Can you help me? TIA!