How to make css component responsive when adding content inside q-card

I am using vue and quasar and have this component:

<template>
  <q-layout>
    <q-page-container style="background-color: #e0e5ea;">
      <q-page class="column">
        <menu-bar></menu-bar>
        <div class="q-ma-lg row col">
            <q-card flat class="col" style="border-radius: 9px;">
              <q-card-section>
              </q-card-section>
            </q-card>
          <q-card flat class="col q-ml-lg " style="border-radius: 9px">
            <q-card-section>
            </q-card-section>
          </q-card>
        </div>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

Without content in <q-card-section>, <q-card> occupy all available height and is responsive during zoom in and zoom out (100% height used), but when I add content into <q-card-section> i.e. 5 <user-account> components, then q-card increase size and whole page is scrollable, I know I can precedent it with overflow auto and specific height, but then page is not responsive. Is it possible to have same behaviour like without content, but have scrollable q-card when there is more elements?

Finally I found solution, the best way to do this is to add both 'row' and 'col' to the child element class, then it occupy whole space and is responsive, then we should add q-scrollarea.