vuetify make two v-flex section have same height side-by-side

Question

my expected display:

current display:

I tried to make two table have responsive same height by using vuetify features, my current attempt is below:

<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>

I also tried to use flexbox but it's not helpful as well. I'm thinking maybe I need to add some CSS to the img element? Any ideas to achieve my goal here? Tks in advance.

Answer 1

I have resolved my problem with the usage of Vuetify 1.x version feature and CSS

my template:

<v-layout row wrap>
  <!-- reporting scope table -->
  <v-flex xs6>
    <div>
      REPORTING SCOPE
    </div>
    <v-layout row wrap>
      <v-flex xs3>
        246
      </v-flex>
      <v-flex xs9>
        Total variants assessed
      </v-flex>
      <v-flex xs3>
        63
      </v-flex>
      <v-flex xs9>
        Total drugs assessed
      </v-flex>
    </v-layout>
  </v-flex>
  <!-- your risk table -->
  <v-flex xs6>
    <div>
      YOUR RISK
    </div>
    <v-layout class="right-table-content">
      <v-flex xs2>
        <v-img :src="imagePath" style="height:100%;"/>
      </v-flex>
      <v-flex xs10>
        <v-layout row wrap>
          <v-flex xs12>
            YOUR PHARMACOGENOMIC RESULTS
          </v-flex>
          <v-flex xs12>
            {{ drugsNum }} Drugs Potentially Impacted
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-flex>
</v-layout>

related CSS style:

.right-table-content {
  display: flex;
}

The key point is to wrap two tables inside one container. And for the right table with image, we can use CSS feature to set two sections with flex display

Answer 2

if you're using vuetify 2+ then v-layout and v-flex are depricated use v-row and v-col instead and rename your div to v-container with attribute fluid (only if you want to remove dafault padding of v-container). if you're not using vuetify 2 then I'd suggest you migrate to it.

<template>
  <v-container>
    <v-row>
      <!-- reporting scope table -->
      <v-col cols="6">
        <v-row class="duo-table-header">
          REPORTING SCOPE
        </v-row>
        <v-row class="table-content">
          <v-row>
            <v-col cols="6">
              246
            </v-col>
            <v-col cols="6">
              Total variants assessed
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="6">
              63
            </v-col>
            <v-col cols="6">
              Total drugs assessed
            </v-col>
          </v-row>
        </v-row>
      </v-col>
      <v-col cols="6">
        <v-row class="duo-table-header">
          YOUR RISK
        </v-row>
        <v-row class="table-content">
          <v-col cols-="2">
            <v-img :src="imagePath" height='100%'/>
          </v-col>
          <v-col cols="10">
            <v-row>
              <v-col cols="12">
                YOUR PHARMACOGENOMIC RESULTS
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12">
                30 Drugs Potentially Impacted
              </v-col>
            </v-row>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>