Make v-card stretch to the bottom of the parent component

First, Let me just repeat what I understood:

• you want to make the navigation drawer height to be equal to the content
• you want the card inside the navigation drawer to fill the height of the navigation drawer

to get your first point done all you have to do is to remove the value of min-height property (by default its 100vh):

.v-application--wrap {
  min-height: unset;
}

In this way, the application height will fit your content.

now to the second problem, in order to make the card fill the rest of the navigation drawer, you'll need some help from flexbox source

.v-navigation-drawer__content {
  display: flex;
  flex-direction: column;
}

.v-card.blue {
  flex: 1 1 auto;
}

I've tried my solution on your example and here's the complete code of the vue file

<template>
  <v-navigation-drawer
    src="https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg"
    width="240"
    permanent
    floating
    class="rounded flex-shrink-0 mr-3"
  >
    <div>
      <v-btn>Test</v-btn> <v-btn>Test</v-btn>
    </div>
    <v-card-text>A Text</v-card-text>
    <v-card class="blue elevation-7" width="240">
      <v-card-text>
        <div class="font-weight-bold ml-8 mb-2">Today</div>

        <v-timeline align-top dense>
          <v-timeline-item
            v-for="message in messages"
            :key="message.time"
            :color="message.color"
            small
          >
            <div>
              <div class="font-weight-normal">
                <strong>{{ message.from }}</strong> @{{ message.time }}
              </div>
              <div>{{ message.message }}</div>
            </div>
          </v-timeline-item>
        </v-timeline>
      </v-card-text>
    </v-card>
  </v-navigation-drawer>
</template>

<script>
export default {
  data: () => ({
    messages: [
      {
        from: "You",
        message: `Sure, I'll see you later.`,
        time: "10:42am",
        color: "deep-purple lighten-1",
      },
      {
        from: "John Doe",
        message: "Yeah, sure. Does 1:00pm work?",
        time: "10:37am",
        color: "green",
      },
    ],
  }),
};
</script>

<style>
.v-application--wrap {
  min-height: unset;
}

.v-navigation-drawer__content {
  display: flex;
  flex-direction: column;
}

.v-card.blue {
  flex: 1 1 auto;
}
</style>

and here's a screenshot of the result

EDIT

I've noticed from the comments that you also want to get rid of the space (padding) inside the navigation drawer. To do this you simply have to add px-0 and py-0 classes to your navigation drawer.

class="rounded flex-shrink-0 mr-3 px-0 py-0"

ps: notice that I had to wrap the two v-btns with so that they don't get affected by the display: flex property of their parent.

here's an updated picture of the final output example

If I understand correctly you should be able to achieve it with CSS only. I'm not sure if this is what you want?

If this suits your needs, than just set one of the parent divs to display: block;

Example

.v-application--wrap {
    display: block;
}

The other solution. I could think of, would be to stretch the SalesCards like this

Example

EDIT

For the sake of simplicity I've created a codesandbox without vue and vuetify.
I think the best way to solve this, is by make use of css-grid.

Example

You can use display: flex;flex-direction: column

You can achieve it with Jquery and get the size of your(s) right elements and set it to your vcard.

How guess height ? https://api.jquery.com/height/