Vue.js Vuetify grid layout 如何填充网格中元素的高度

我正在try 创建网格布局，但遇到了问题.

我试图创建的布局附在下图中.表现比解释容易.

• 一个侧面板卡片布局，将填充一个项目列表.A.
• 2元件顶部面板.
• 一个大的主面板来填充剩余的空间

使用vuetify网格布局系统，我try 了一下，但无法很好地填充所有空间.我的代码如下.

有没有一个很好的方法来创建这个网格布局？

<v-container fluid grid-list-md box>
  <v-layout row>

    <v-flex d-flex xs3>
      <v-layout row wrap>
        <v-card color="orange lighten-2" tile flat>
          <v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
        </v-card>

        <v-divider></v-divider>

        <v-card color="orange lighten-2" tile flat>
          <v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
        </v-card>

        <v-divider></v-divider>

        <v-card color="orange lighten-2" tile flat>
          <v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
        </v-card>

        <v-divider></v-divider>

        <v-card color="orange lighten-2" tile flat>
          <v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
        </v-card>
      </v-layout>

    </v-flex>

    <v-flex d-flex xs9>

      <v-layout row wrap>
        <v-layout row>
          <v-flex d-flex>
            <v-card color="blue-grey" dark tile flat>
              <v-card-text>{{ lorem }}</v-card-text>
            </v-card>
          </v-flex>

          <v-flex d-flex>
            <v-card color="blue-grey" dark tile flat>
              <v-card-text>{{ lorem }}</v-card-text>
            </v-card>
          </v-flex>
        </v-layout>

        <v-layout row>
          <v-flex d-flex xs9>
            <v-card color="blue-grey" dark tile flat>
              <v-card-text>{{ lorem }}</v-card-text> 
            </v-card>
          </v-flex>
        </v-layout>
      </v-layout>

    </v-flex>
  </v-layout>
</v-container>