Vue3/Vuetify中内容自适应父容器尺寸的实现指南

<!-- container component -->
<template>
  <v-container class="screen-container fill-height">
    <v-row class="screen-row fill-height">
      <v-col>
        <InputBar />
      </v-col>
      <v-col>
        <ResultScreen />
      </v-col>
    </v-row>
  </v-container>
</template>

<!-- ResultScreen component -->
<template>
  <v-container class="result-container fill-height elevation-12">
    <v-container class="ma-0 pa-0 content-wrapper"> <!-- 新增 content-wrapper 类 -->
      <v-row>
        <v-img class="img-responsive" :src="store.imgUrl" @click="downloadImg"></v-img> <!-- 应用 img-responsive 类 -->
      </v-row>
      <v-container v-if="store.progress === 100 && !isUpscaled" class="btn-container mt-3">
        <v-row class="justify-center" v-for="(row, index) in btnRows" :key="index">
          <v-col cols="auto" v-for="btn in row" :key="btn">
            <v-btn variant="tonal" @click="onClick(btn)">{{ btn }}</v-btn>
          </v-col>
        </v-row>
      </v-container>
      <v-row v-if="store.imgUrl && store.progress !== 100" class="justify-center mt-5">
        <v-progress-circular
          :rotate="360"
          :size="75"
          :width="15"
          :model-value="store.progress"
          color="teal"
          class=""
          align="center"
        >
          {{ store.progress }}
        </v-progress-circular>
      </v-row>
    </v-container>
  </v-container>
</template>

<style scoped>
/* 针对 ResultScreen 内部的容器应用约束 */
.result-container {
  /* 确保 result-container 本身能利用 fill-height 占据空间 */
  /* 但其内部内容需要进一步约束 */
  display: flex; /* 使用 flex 布局帮助子元素自适应 */
  flex-direction: column;
  overflow: hidden; /* 隐藏溢出内容，但更好的做法是约束子元素 */
}

.content-wrapper {
  /* 关键：对包裹内容的容器应用最大尺寸约束 */
  box-sizing: border-box;
  max-height: 100%;
  max-width: 100%;
  overflow: auto; /* 如果内容确实需要滚动，允许其内部滚动 */
  flex-grow: 1; /* 允许它在 flex 容器中增长 */
  display: flex; /* 内部内容也使用 flex 布局 */
  flex-direction: column;
}

.img-responsive {
  /* 确保图片自适应 */
  max-width: 100%;
  height: auto; /* 保持图片宽高比 */
  display: block; /* 移除图片底部可能存在的空白间隙 */
}

/* 针对按钮容器，如果它也可能溢出 */
.btn-container {
  max-width: 100%;
  box-sizing: border-box;
  flex-shrink: 0; /* 按钮容器不应被压缩 */
}

/* 针对进度条容器 */
.justify-center.mt-5 {
  max-width: 100%;
  box-sizing: border-box;
  flex-shrink: 0; /* 进度条容器不应被压缩 */
}
</style>