title: How do I get v-card in Vuetify to take up full height of container?
body: <p>Please have a look at this Vuetify fiddle: <a href="https://jsfiddle.net/L4r5aftq/" rel="nofollow noreferrer">https://jsfiddle.net/L4r5aftq/</a></p>
  
  <pre><code>&lt;div id="app"&gt;
          &lt;div class="address-card-container" style="background-color: pink;"&gt;
              &lt;v-card&gt;
                  &lt;div class="card-content-container"&gt;
                      &lt;div class="icon-container" style="width: 30px;"&gt;
                          &lt;v-icon&gt;calendar&lt;/v-icon&gt;
                      &lt;/div&gt;
                      &lt;div style="margin-left: 20px;"&gt;
                          &lt;p&gt;&lt;strong&gt;Our Home&lt;/strong&gt;&lt;/p&gt;
                          &lt;p&gt;123 4th Avenue N&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/v-card&gt;
              &lt;v-divider horizontal class="mx-4"&gt;&lt;/v-divider&gt;
              &lt;v-card class="add-property-card" style="margin: auto;"&gt;
                  &lt;div class="card-content-container"&gt;
                      &lt;div class="icon-container" style="width: 15px"&gt;&lt;v-icon&gt;add&lt;/v-icon&gt;&lt;/div&gt;
                      &lt;div class="add-property-container"&gt;&lt;p&gt;Add a property&lt;/p&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/v-card&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>.address-card-container {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          width: 100%;
          margin-bottom: 60px;
          align-items: stretch!important;
  
          .card {
              border: 1px solid #ccc;
              width: 50%;
              height: 100% !important;
              min-height: 100% !important;
  
              .card-content-container {
                  min-height: 50px;
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  margin: 30px 7%;
  
                  .icon-container {
                      .v-icon {
                          height: 50px;
                          width: 100%;
                          color: #009FD4;
                      }
                  }
  
                  .add-property-container {
                      margin-left: 20px;
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                  }
              }
          }
  
          .add-property-card {
              cursor: pointer;
          }
      }
  </code></pre>
  
  <p>It consists of two cards inside a flex box configured as row and space-between:</p>
  
  <p><a href="https://i.stack.imgur.com/S9U2T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S9U2T.png" alt="enter image description here"></a></p>
  
  <p>I am trying to set the height of each card to take up 100% of the flex box, but it is not working.</p>
  
  <p>If you go to the fiddle, you'll see that I set height: 100%!important and min-height: 100%!important. I also set align-items: stretch!important in the flex box. But the card on the right just doesn't want to take up the full height of the flex box.</p>
  
  <p>How can I make the cards take up the full height of the flex box?</p>