如何在Vuetify框架中增大对话框高度以适配内部textarea内容

我们在基于Vue.js开发的应用中使用了Vuetify组件框架，应用内的一个对话框搭载了若干内置组件。两个用红框标注的textarea用于展示信息，当前存在的问题是这两个textarea出现了不需要的垂直滚动条。我们需要给textarea内部留出更多空间以完整展示内容，也就是说，需要增大对话框本身的高度，以此调整包括textarea在内的所有内部组件的高度。

现有代码如下：

<template>
  <wrapper>
    <v-dialog v-model="dialog" max-width="500px">
      <v-card>
        <v-card-title>
          <span class="headline">Заявка ({{ editedItem.id }})</span>
        </v-card-title>

        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex>
                <v-text-field v-model="editedItem.status" label="Статус"></v-text-field>
              </v-flex>
              <v-flex>
                <v-text-field v-model="editedItem.comment" label="Комментарий"></v-text-field>
              </v-flex>
              <v-flex>
                <v-textarea :value="fullName(editedItem.user)" label="Клиент" rows="2" disabled></v-textarea>
              </v-flex>
              <v-flex>
                <v-textarea :value="unitName(editedItem.search_by)" label="Студия" rows="2" disabled></v-textarea>
              </v-flex>
              <v-flex>
                <v-textarea v-if="editedItem.services" :value="studio(editedItem.services)" label="Услуги" rows="2" disabled></v-textarea>
              </v-flex>
              <v-flex>
                <v-textarea v-if="editedItem.periods" :value="desiredTime(editedItem.periods)" label="Желаемое время" rows="2" disabled></v-textarea>
              </v-flex>
              <v-flex>
                <v-text-field :value="formatDateWithoutHours(editedItem.date)" label="Желаемая дата" disabled></v-text-field>
              </v-flex>
              <v-flex>
                <v-text-field :value="formatDate(editedItem.created_at)" label="Дата создания" disabled></v-text-field>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="close">Cancel</v-btn>
          <v-btn color="blue darken-1" flat @click="save">Save</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
</template>

此前尝试修改了多处高度属性的取值，但都没有生效。

修改高度不生效是因为Vuetify组件有默认的内置样式约束，可按以下步骤调整：

1. 调整对话框的高度约束，给v-dialog增加高度自适应配置，同时给内部v-card设置最小高度，避免布局被压缩
2. 给v-textarea增加auto-grow属性，开启内容自适应高度能力，同时可适当调高rows属性的默认值，留出足够的初始展示空间
3. 可选配置：如果不需要保留滚动条能力，可给v-textarea增加自定义样式，强制隐藏垂直滚动条

修改后的代码示例：

<template>
  <wrapper>
    <!-- 给v-dialog增加max-height配置，允许最高占屏幕90%高度，height设为auto自适应内容 -->
    <v-dialog v-model="dialog" max-width="500px" height="auto" max-height="90vh">
      <!-- 给v-card设置最小高度，避免被默认样式压缩 -->
      <v-card min-height="700px">
        <v-card-title>
          <span class="headline">Заявка ({{ editedItem.id }})</span>
        </v-card-title>

        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex>
                <v-text-field v-model="editedItem.status" label="Статус"></v-text-field>
              </v-flex>
              <v-flex>
                <v-text-field v-model="editedItem.comment" label="Комментарий"></v-text-field>
              </v-flex>
              <v-flex>
                <!-- 增加auto-grow属性，rows调到3，足够容纳两行内容不出现滚动条 -->
                <v-textarea :value="fullName(editedItem.user)" label="Клиент" rows="3" disabled auto-grow class="no-scroll-textarea"></v-textarea>
              </v-flex>
              <v-flex>
                <v-textarea :value="unitName(editedItem.search_by)" label="Студия" rows="3" disabled auto-grow class="no-scroll-textarea"></v-textarea>
              </v-flex>
              <v-flex>
                <v-textarea v-if="editedItem.services" :value="studio(editedItem.services)" label="Услуги" rows="3" disabled auto-grow class="no-scroll-textarea"></v-textarea>
              </v-flex>
              <v-flex>
                <v-textarea v-if="editedItem.periods" :value="desiredTime(editedItem.periods)" label="Желаемое время" rows="3" disabled auto-grow class="no-scroll-textarea"></v-textarea>
              </v-flex>
              <v-flex>
                <v-text-field :value="formatDateWithoutHours(editedItem.date)" label="Желаемая дата" disabled></v-text-field>
              </v-flex>
              <v-flex>
                <v-text-field :value="formatDate(editedItem.created_at)" label="Дата создания" disabled></v-text-field>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="close">Cancel</v-btn>
          <v-btn color="blue darken-1" flat @click="save">Save</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </wrapper>
</template>

<style scoped>
/* 可选：强制隐藏textarea滚动条 */
.no-scroll-textarea >>> .v-textarea__input {
  overflow-y: hidden !important;
}
</style>

如果使用的是Vuetify 3版本，深度选择器>>>可替换为:deep()。

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