如何让Quasar的q-card添加内容后仍保持响应式并支持内部滚动

要实现无内容时Q-Card占满可用高度、内容过多时卡片内部滚动的效果，无需固定高度，利用Quasar的Flex布局类即可完成：

修改后的组件代码 #

<template>
  <q-layout>
    <q-page-container style="background-color: #e0e5ea;">
      <q-page class="column">
        <menu-bar></menu-bar>
        <!-- 用items-stretch让卡片等高拉伸 -->
        <div class="q-ma-lg row col items-stretch">
          <!-- h-100确保卡片占满父容器高度，column启用垂直flex布局 -->
          <q-card flat class="col h-100 column" style="border-radius: 9px;">
            <!-- flex-grow-1填充卡片剩余空间，overflow-auto实现内容滚动 -->
            <q-card-section class="flex-grow-1 overflow-auto">
              <!-- 示例内容：多个user-account组件 -->
              <user-account v-for="i in 5" :key="i"></user-account>
            </q-card-section>
          </q-card>
          <q-card flat class="col q-ml-lg h-100 column" style="border-radius: 9px">
            <q-card-section class="flex-grow-1 overflow-auto">
              <!-- 另一个卡片的内容区域 -->
            </q-card-section>
          </q-card>
        </div>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

关键类的作用说明 #

• items-stretch：让Row容器内的卡片自动拉伸到相同高度，保持布局一致性。
• h-100：使Q-Card高度占满父容器分配的可用空间，维持响应式表现。
• column：让Q-Card内部采用垂直Flex布局，便于子元素分配空间。
• flex-grow-1：让Q-Card-Section占据卡片内的剩余空间，无内容时填满整个卡片；有内容时先占满空间，超出部分触发滚动。
• overflow-auto：当Q-Card-Section内的内容高度超过容器时，自动显示垂直滚动条，避免卡片撑大导致页面整体滚动。

内容的提问来源于stack exchange，提问作者MSZMC