Контент внутри макета меняет размер макетов. как это изменить?

Question

У меня есть макет, состоящий из карт. внутри каждой карты есть разные типы контента. проблема в том, что контент меняет размеры карт вокруг. я хочу, чтобы карточки оставались стати c, а размер содержимого полностью зависел от размера его родителя. Я также хочу, чтобы страница была реактивной, поэтому предоставление минимального / максимального значения высоты / ширины не будет работать во всех окнах просмотра. Вот код:

v-app:

<template>
  <v-app>
    <v-layout row ma-5 flex-nowrap>
      <v-flex xs4 sm3 md2 ml-5>
        <BaseCard>
           <v-list>

                 <v-list-item>
                   <v-list-item-content>
                      <v-list-item-title> item1 </v-list-item-title>
                   </v-list-item-content>
                 </v-list-item>

                 <v-list-item>
                   <v-list-item-content>
                      <v-list-item-title> item2 </v-list-item-title>
                   </v-list-item-content>
                 </v-list-item>

                </v-list>
            </BaseCard>
      </v-flex>
      <v-flex>
        <v-layout column fill-height>
          <v-flex>
            <BaseCard>

             <!--more lists....-->          

            </BaseCard>
          </v-flex>
          <v-flex xs4 mt-3>
            <BaseCard></BaseCard>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-app>
</template>

BaseCard:

<template>
  <v-card height="100%">
    <v-toolbar color="pink" dark flat dense>
    </v-toolbar>
    <v-container>
      <slot></slot>
    </v-container>
  </v-card>
</template>