How to position a row at the bottom of a q-scroll-area in Quasar-CodePudding

I have a sidebar menu where I am trying to put my social media section at the bottom of the sidebar but I am struggling to get flex to work and do so. I tried item-stretch on the second row but the issue is the row does not expand the entire scroll area. The closest example which is not quasar per say can be found here https://preview.colorlib.com/#elen

Sidebar Component:

<template>
<div >
  <q-list padding>
    <q-item clickable v-ripple >
      <q-item-section avatar>
        <q-icon name="fa-solid fa-house" style="font-size:1.25rem"/>
      </q-item-section>
      <q-item-section>
        HOME
      </q-item-section>
    </q-item>

    <q-item active clickable v-ripple >
      <q-item-section avatar>
        <q-icon name="fa-solid fa-shirt" style="font-size:1.25rem"/>
      </q-item-section>

      <q-item-section>
        SERVICES
      </q-item-section>
    </q-item>

    <q-item clickable v-ripple >
      <q-item-section avatar>
        <q-icon name="fa-solid fa-envelope" style="font-size:1.25rem"/>
      </q-item-section>

      <q-item-section>
        CONTACT US
      </q-item-section>
    </q-item>
  </q-list>
</div>
<div  style="">
  <div >
    <q-btn flat size="sm" color="primary" round icon="fa-brands fa-google" aria-label="google" />
    <q-btn flat size="sm" color="primary" round icon="fa-brands fa-facebook-f" aria-label="facebook" />
    <q-btn flat size="sm" color="primary" round icon="fa-brands fa-instagram" aria-label="instagram" />
  </div>
  <h2 >CONNECT WITH US</h2>
  <h6 >If you like what you have seen so far we can guarentee you will appreciate our print quality.</h6>
</div>

<script setup>
  import { ref } from 'vue'

  const searchText = ref('')
</script>
<style lang="scss" scoped>
  .block-wrapper{
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
  }

  .active-menu-item{
    background-color: $background-accent;
  }

  .menu-item{
    letter-spacing: .15rem;
    font-weight:500;
    border-radius: 7px;
  }

</style>

Layout Component

    <q-drawer
  v-model="navigationDrawer"
  bordered
  side="left"
  behavior="mobile"
  :width="$q.screen.width >= 400  ? 400 : $q.screen.width"
>
  <q-scroll-area >
    <div >
      <q-btn flat round icon="fa-solid fa-xmark" aria-label="Menu" @click="toggleNavigationDrawer"/>
    </div>
    <div  style="min-height: 100%;">
      <div >
        <HomeSidebar/>
      </div>
    </div>
  </q-scroll-area>
</q-drawer>

CodePudding user response：

Turn q-scroll-area's content container into a flex column. You can apply CSS classes directly to the container with :content-style prop

<q-scroll-area
  
  :content-style="{ display: 'flex', 'flex-direction': 'column' }"
>

Also make the div surrounding the sidebar a flex column with justify-content: space-between. The row surrounding it should also have flex-grow: 1

<div  style="min-height: 100%; flex-grow: 1">
  <div >
    <HomeSidebar/>
  </div>

Here's a sandbox that shows the result