Vuetify布局中如何让v-col内容占满全部垂直剩余空间

Flex 布局的拉伸规则只会对直接子元素生效，你当前代码的高度传递链路在多层嵌套中中断了，具体断点有三个：

• 包裹左右两列的外层<v-row>没有设置拉伸属性，默认高度由内容撑开，无法占满父级v-container扣除底部固定row2后的剩余垂直空间。你右侧Col2看起来撑满是因为内部卡片加了fill-height，但本质是父级高度刚好被右侧内容顶开，并没有给左侧列分配足够的垂直空间。
• 左侧第一列的<v-col class="grow pa-0">默认不是flex容器，它内部嵌套的、加了grow类的v-container，因为父级不满足flex布局上下文，flex-grow属性完全不生效，没法撑满左侧列的高度，高度传递到这一层直接断开。
• Col 1 - content所在的内层<v-col>和内部卡片都没有加拉伸属性，就算上层元素拿到了剩余高度，这两个元素默认只会适配内容高度，不会自动填满可用空间。

只需要沿着高度传递链路补全对应Vuetify内置类即可，不需要写额外自定义CSS：

1. 给包裹左右两列的外层<v-row>加grow类，让这个row自动拉伸占满父容器的剩余垂直高度，给内部两列提供可分配的空间。
2. 给左侧第一列的<v-col class="grow pa-0">补d-flex flex-column类，把它变成纵向排列的flex容器，让内部嵌套的v-container的grow属性可以正常生效。
3. 给包裹Col 1 - content的内层<v-col>加d-flex类，同时给内部的Col 1 - content卡片加fill-height类，让卡片自动撑满所在列的全部高度。

<div id="app">
    <v-app id="inspire">
        <v-container class="grow d-flex flex-column flex-nowrap ">
            <!-- 外层row加grow类占满剩余高度 -->
            <v-row class="grow">
                <!-- 左侧col补d-flex flex-column建立flex上下文 -->
                <v-col  class="grow pa-0 d-flex flex-column">
                     <!--<v-card elevation="2" class="pa-3"> Subheader </v-card>-->
                     <v-container class="grow d-flex flex-column pa-0 flex-nowrap">
                    <v-row >
                        <v-col >
                            <v-card elevation="2" class="pa-3"> Col 1 - head </v-card>
                        </v-col>
                    </v-row>
                    <v-row class="grow">
                        <!-- content所在col补d-flex -->
                        <v-col class="d-flex">
                            <!-- 卡片补fill-height撑满空间 -->
                            <v-card elevation="2" class="pa-3 fill-height"> Col 1 - content </v-card>
                        </v-col>
                    </v-row>
                    </v-container>
                </v-col>
                <v-col class="grow box" v-if="show">
                     <v-card elevation="2" class="pa-3 fill-height"> Col 2 - panel </v-card>
                </v-col>
            </v-row>
            <v-row class="shrink">
                <v-col cols="12">
                    <v-card elevation="2" class="pa-3"> row 2</v-card>
                </v-col>
            </v-row>
        </v-container>
    </v-app>
</div>

后续写这类纵向拉伸的flex布局时，只要遵守一个规则就不会出问题：从最外层拿到剩余空间的容器开始，每一层需要拉伸的元素，必须保证它的直接父级是flex容器，且自身设置了对应的拉伸属性（普通块元素撑满父级就加fill-height，flex子项占剩余空间就加grow），不要让高度传递的链路中断。

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