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

Question

I have v-card that is inside of v-navigation-drawer:

 <v-navigation-drawer
      dark
      src="https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg"
      width="100%"
      permanent
      class="rounded"
    >
      <v-btn>Test</v-btn> <v-btn>Test</v-btn>
      <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>

How can I make it to stretch/fill in to the bottom of the parent component so that parent component remains same height as the rest of the grid?

Here is helper picutre of what im trying to achieve (marked by black lines I tried to have the nav-drawer have the same height as the content on the right (3 cards) also the card inside the nav-drawer should fill it to the bottom but not past it.

Here is the minimal reproducible example where you can see yourself that its not working:

https://codesandbox.io/s/vuetify-playground-barchart-forked-c08hr?file=/src/components/dashboard/MiniMenu.vue

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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/