vuetify 使两个 v-flex 部分并排具有相同的高度

我的预期显示：

当前显示：

我试图通过使用 vuetify 功能使两个表具有相同的响应高度，我目前的尝试如下：

<template>
  <div>
    <v-layout class="duo-table" row wrap>
      <!-- reporting scope table -->
      <v-flex xs6 class="left-table">
        <v-flex height="100%">
          <div class="duo-table-header">
            REPORTING SCOPE
          </div>
          <div class="table-content">
            <v-layout>
              <v-flex xs3 class="left-table-xs3-col">
                246
              </v-flex>
              <v-flex xs9 class="left-table-xs9-col" >
                Total variants assessed
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs3 class="left-table-xs3-col">
                63
              </v-flex>
              <v-flex xs9 class="left-table-xs9-col">
                Total drugs assessed
              </v-flex>
            </v-layout>
          </div>
        </v-flex>
      </v-flex>
      <!-- your risk table -->
      <v-flex xs6 class="right-table">
        <v-flex height="100%">
          <div class="duo-table-header">
            YOUR RISK
          </div>
          <div class="table-content">
            <v-layout row wrap>
              <v-flex xs2 class="right-table-xs2-img">
                <v-img :src="imagePath" height='100%'/>
              </v-flex>
              <v-flex xs10>
                <v-flex height="100%">
                  <v-flex class="right-table-xs10-col">
                    YOUR PHARMACOGENOMIC RESULTS
                  </v-flex>
                  <v-flex class="right-table-xs10-col">
                    30 Drugs Potentially Impacted
                  </v-flex>
                </v-flex>
              </v-flex>
            </v-layout>
          </div>
        </v-flex>
      </v-flex>
    </v-layout>
  </div>
</template>

我也尝试使用 flexbox 但它也没有帮助。我在想也许我需要向 img 元素添加一些 CSS？有什么想法可以在这里实现我的目标吗？提前确认。