Vuetify3 MonthPicker布局问题：右侧列高度匹配左侧列

解决方案步骤： #

• 为右侧的v-col、v-sheet和内部v-row添加h-100类，让它们继承父容器的高度（由左侧月份列的按钮高度决定）；
• 给右侧的v-col设置d-flex flex-column，使内部元素垂直布局；
• 移除v-list的固定height属性，替换为flex-grow-1 overflow-y-auto，让列表填充可用空间并在内容超出时显示滚动条。

修改后的完整模板代码： #

<v-card width="500">
  <v-container>
    <v-row no-gutters>
      <v-col class="pa-1">
        <v-sheet>
          <v-row no-gutters>
            <v-col cols="3" v-for="c in 12" :key="c">
              <v-btn height="60">
                {{ months[c - 1] }}
              </v-btn>
            </v-col>
          </v-row>
        </v-sheet>
      </v-col>

      <v-col cols="auto" class="h-100">
        <v-sheet class="h-100">
          <v-row no-gutters class="h-100">
            <v-col class="d-flex flex-column">
              <v-list lines="one" class="flex-grow-1 overflow-y-auto">
                <v-list-item-group>
                  <div v-for="n in 100" :key="n">
                    {{ n + 2000 }}
                  </div>
                </v-list-item-group>
              </v-list>
            </v-col>
          </v-row>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</v-card>

原理说明： #

1. h-100类让右侧的列、sheet和行都铺满父容器的高度，而父容器的高度由左侧月份列的4×3按钮布局自动撑开；
2. d-flex flex-column确保列表能垂直填充可用空间；
3. flex-grow-1让列表占据剩余的垂直空间，overflow-y-auto在内容超出时自动显示滚动条，同时不会让列的高度超出左侧。

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