title: How to make a div take the remaining height of parent container
body: <p>I know this has been asked before, but I could not find any solution that works.</p>
  
  <p>I need the div with class .height to take the remaining height of the parent</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;v-app&gt;
      &lt;main&gt;
        &lt;v-content&gt;
          &lt;v-container fluid grid-list-xs&gt;
            &lt;v-layout row wrap&gt;
              &lt;v-flex xs6&gt;
                &lt;v-toolbar&gt;&lt;/v-toolbar&gt;
                &lt;div class="height"&gt;&lt;/div&gt;
              &lt;/v-flex&gt;
              &lt;v-flex xs2&gt;&lt;/v-flex&gt;
              &lt;v-flex xs4&gt;&lt;/v-flex&gt;
            &lt;/v-layout&gt;
          &lt;/v-container&gt;
        &lt;/v-content&gt;
      &lt;/main&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.height {
    display: flex;
    flex-flow: column;
    height: 100%;
    border: 1px solid orange;
  }
  </code></pre>
  
  <p>CODEPEN link
  <a href="https://codepen.io/anon/pen/bYGeMN" rel="nofollow noreferrer">https://codepen.io/anon/pen/bYGeMN</a></p>
  
  <p>Why is not the display flex + height 100% working?</p>
  
  <p>I'm using the Vuetify library to get a material design theme on VueJS, but I think this question is not related to VueJS but CSS.</p>
  
  <p>Thanks in advance</p>