title: Vuetify flexbox chat layout
body: <p>I am creating a <a href="https://codepen.io/salalaslam/pen/eYNwjZB?editors=1010" rel="nofollow noreferrer">chat layout</a> in Vuetify (Vue.js Material Design Framework). As a developer I prefer to keep my custom css as less a possible and utilize as much as the framework has to offer. But not having solid understanding of Flexbox I am have difficulty finalizing the chat layout which I want.<br>
  Things I am struggling with are:</p>
  
  <ol>
  <li>the title of v-card (right side) should stick to the top of box.</li>
  <li>the type_a_message field should stick to bottom of the box.</li>
  <li>the middle (message bubbles) area is scrollable in the remaining space.</li>
  <li>the sidebar (users list) to not shrink whereas the right side should be expand/shrink.</li>
  </ol>
  
  <p>My Template looks like this (apologies for verbosity)</p>
  
  <pre><code>    &lt;v-container
        class="fill-height pa-0 elevation-4"
      &gt;
        &lt;v-row class="no-gutters"&gt;
          &lt;v-col
            cols="3"
            class="flex-grow-1 flex-shrink-0"
            style="border-right: 1px solid #0000001f;"
          &gt;
            &lt;v-responsive
              class="overflow-y-auto fill-height"
              height="500"
            &gt;
              &lt;v-list subheader&gt;
                &lt;v-list-item-group v-model="activeChat"&gt;
                  &lt;template v-for="(item, index) in parents"&gt;
                    &lt;v-list-item
                      :key="`parent${index}`"
                      :value="item.id"
                    &gt;
                      &lt;v-list-item-avatar color="grey lighten-1 white--text"&gt;
                        &lt;v-icon&gt;
                          chat_bubble
                        &lt;/v-icon&gt;
                      &lt;/v-list-item-avatar&gt;
                      &lt;v-list-item-content&gt;
                        &lt;v-list-item-title v-text="item.title" /&gt;
                        &lt;v-list-item-subtitle v-text="'hi'" /&gt;
                      &lt;/v-list-item-content&gt;
                      &lt;v-list-item-icon&gt;
                        &lt;v-icon :color="item.active ? 'deep-purple accent-4' : 'grey'"&gt;
                          chat_bubble
                        &lt;/v-icon&gt;
                      &lt;/v-list-item-icon&gt;
                    &lt;/v-list-item&gt;
                    &lt;v-divider
                      :key="`chatDivider${index}`"
                      class="my-0"
                    /&gt;
                  &lt;/template&gt;
                &lt;/v-list-item-group&gt;
              &lt;/v-list&gt;
            &lt;/v-responsive&gt;
          &lt;/v-col&gt;
          &lt;v-col
            cols="3"
            style="max-width: 100%;"
            class="flex-grow-1 flex-shrink-0"
          &gt;
            &lt;v-responsive
              v-if="activeChat"
              class="overflow-y-auto fill-height"
              height="500"
            &gt;
              &lt;v-card
                flat
                class="fill-height"
              &gt;
                &lt;v-card-title&gt;
                  john doe
                &lt;/v-card-title&gt;
                &lt;v-card-subtitle&gt;
                  hi
                &lt;/v-card-subtitle&gt;
                &lt;v-divider class="my-0" /&gt;
                &lt;v-card-text class="flex-grow-1 fill-height"&gt;
                  &lt;template v-for="(msg, i) in messages"&gt;
                    &lt;div
                      :class="{ 'd-flex flex-row-reverse': msg.me }"
                    &gt;
                      &lt;v-menu offset-y&gt;
                        &lt;template v-slot:activator="{ on }"&gt;
                          &lt;v-hover
                            v-slot:default="{ hover }"
                          &gt;
                            &lt;v-chip
                              :color="msg.me ? 'primary' : ''"
                              dark
                              style="height:auto;white-space: normal;"
                              class="pa-4 mb-2"
                              v-on="on"
                            &gt;
                              {{ msg.content }}
                              &lt;sub
                                class="ml-2"
                                style="font-size: 0.5rem;"
                              &gt;{{ msg.created_at }}&lt;/sub&gt;
                              &lt;v-icon
                                v-if="hover"
                                small
                              &gt;
                                expand_more
                              &lt;/v-icon&gt;
                            &lt;/v-chip&gt;
                          &lt;/v-hover&gt;
                        &lt;/template&gt;
                        &lt;v-list&gt;
                          &lt;v-list-item&gt;
                            &lt;v-list-item-title&gt;delete&lt;/v-list-item-title&gt;
                          &lt;/v-list-item&gt;
                        &lt;/v-list&gt;
                      &lt;/v-menu&gt;
                    &lt;/div&gt;
                  &lt;/template&gt;
                  &lt;v-text-field
                    v-model="messageForm.content"
                    label="type_a_message"
                    type="text"
                    no-details
                    outlined
                    append-outer-icon="send"
                    @keyup.enter="messages.push(messageForm)"
                    @click:append-outer="messages.push(messageForm)"
                  /&gt;
                &lt;/v-card-text&gt;
              &lt;/v-card&gt;
            &lt;/v-responsive&gt;
          &lt;/v-col&gt;
        &lt;/v-row&gt;
      &lt;/v-container&gt;
  </code></pre>