vuetify, space between menu elements

Question

In the left hamburger menu, I would like to separate the logout button from all the other elements. While all the other elements are at top of the menu, the logout btn needs to be at the far bottom of the menu and have a small margin-bottom: 10px for the looks.

I have tried using display flex with justify content, but it does not seem to want to work. I am very new to vuetify, so I must clearly e missing something quite obvious.

Any advice is very welcome.

Codepen example here : https://codepen.io/jonathank2018/pen/abVdZPW?editors=101

<div id="app">
  <v-app id="inspire" >
    <v-card
      style="width: 100%;"
      class="mx-auto overflow-hidden"
      height="400"
    >
      <v-app-bar
        color="deep-grey"
        dark
      >
        <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
  
        <v-col
          class="d-flex"
          cols="12"
          sm="2"
        >
          <v-select
            flat   
            style="margin-top:20px; "
            :items="items"
            label="My View"
          ></v-select>
        </v-col>
        
        
        <v-spacer></v-spacer>
  
        <v-btn icon>
          <v-icon>mdi-share-variant</v-icon>
        </v-btn>
        
        <v-btn icon>
          <v-icon>mdi-download</v-icon>
        </v-btn>
        
        <v-btn icon>
          <v-icon>mdi-heart-outline</v-icon>
        </v-btn>
  
        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
        
      </v-app-bar>
  
      <v-navigation-drawer
        style="border-radius: 20px;margin: 10px;"
        dark
        v-model="drawer"
        absolute
        temporary
      >
        <div style="display:flex; justify-content: space-between; flex-direction: column">
        <v-list
          nav
          dense
        >
          <v-list-item-group
            v-model="group"
            active-class="deep-purple--text text--accent-4"
          >
            <v-list-item>
              <v-title style="font-size: 1em;">Hello Mike!</v-title>
            </v-list-item>
            
            <v-list-item>
              <v-list-item-icon>
                <v-icon>mdi-circle</v-icon>
              </v-list-item-icon>
              <v-list-item-title>whatever</v-list-item-title>
            </v-list-item>
  
            <v-list-item>
              <v-list-item-icon>
                <v-icon>mdi-file-document</v-icon>
              </v-list-item-icon>
              <v-list-item-title>Articles</v-list-item-title>
            </v-list-item>
            
            <v-list-item>
              <v-list-item-icon>
                <v-icon>mdi-email</v-icon>
              </v-list-item-icon>
              <v-list-item-title>Emails</v-list-item-title>
            </v-list-item>
            
            <v-list-item>
              <v-list-item-icon>
                <v-icon>mdi-cog</v-icon>
              </v-list-item-icon>
              <v-list-item-title>Admin</v-list-item-title>
            </v-list-item>
            
            <v-list-item>
              <v-list-item-icon>
                <v-icon>mdi-help-circle</v-icon>
              </v-list-item-icon>
              <v-list-item-title>Help</v-list-item-title>
            </v-list-item>
            
          </v-list-item-group>
        </v-list>
        
        
        <v-btn
        rounded       
        style="display: block; margin-left: auto;
        margin-right: auto; width: 85%; font-size: 1em;text-transform: unset !important;"
        dark
        elevation=0
        color="#424242"
      >
        Logout
      </v-btn>
        </div>
        
      </v-navigation-drawer>
    </v-card>
  </v-app>
</div>

Answer 1

You have almost done everything yourself.

Just add height: 100% to your list wrapper div and apply helper class mb-5 (or apply margin-bottom in style attribute) to logout button.

<div style="display:flex; justify-content: space-between; flex-direction: column; height: 100%">
...
  <v-btn
    rounded       
    style="display: block; margin-left: auto;
    margin-right: auto; width: 85%; font-size: 1em;text-transform: unset !important;"
    dark
    elevation=0
    color="#424242"
    class="mb-5"
  >
    Logout
  </v-btn>
</div>
...

Test this at CodePen.