title: Content size - Vuetify
body: <p>I'm trying that the lower right component will fill all its space,<br>
  I've placed a <code>div</code> element but for some reason, it won't fill out the whole width<br>
  I want it to fill everything from the sidebar to the end (also full height).<br>
  I don't want to use CSS positioning for this.<br>
  I tried <code>width: 100%</code> but it doesn't work</p>
  
  <p>code:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;v-navigation-drawer v-model="drawer" clipped fixed app&gt;
        &lt;v-list dense&gt;
          &lt;v-list-tile class="mt-3" @click&gt;
            &lt;v-list-tile-action&gt;
              &lt;v-icon color="darken-1"&gt;add_circle_outline&lt;/v-icon&gt;
            &lt;/v-list-tile-action&gt;
            &lt;v-list-tile-title&gt;Subscribe&lt;/v-list-tile-title&gt;
          &lt;/v-list-tile&gt;
          &lt;v-list-tile disabled @click&gt;
            &lt;v-list-tile-action&gt;
              &lt;v-icon&gt;dashboard&lt;/v-icon&gt;
            &lt;/v-list-tile-action&gt;
            &lt;v-list-tile-content&gt;
              &lt;v-list-tile-title&gt;Dashboard&lt;/v-list-tile-title&gt;
            &lt;/v-list-tile-content&gt;
          &lt;/v-list-tile&gt;
          &lt;v-list-tile disabled @click&gt;
            &lt;v-list-tile-action&gt;
              &lt;v-icon&gt;settings&lt;/v-icon&gt;
            &lt;/v-list-tile-action&gt;
            &lt;v-list-tile-content&gt;
              &lt;v-list-tile-title&gt;Settings&lt;/v-list-tile-title&gt;
            &lt;/v-list-tile-content&gt;
          &lt;/v-list-tile&gt;
        &lt;/v-list&gt;
      &lt;/v-navigation-drawer&gt;
      &lt;v-toolbar app fixed clipped-left&gt;
        &lt;v-toolbar-side-icon @click.stop="drawer = !drawer"&gt;&lt;/v-toolbar-side-icon&gt;
        &lt;v-toolbar-title&gt;Application&lt;/v-toolbar-title&gt;
      &lt;/v-toolbar&gt;
      &lt;div class="editor" style="border: 1px solid red; width: 100%;"&gt;
          &lt;v-flex xs12 sm6 md3&gt;
            &lt;v-text-field
            readonly
              label="Regular"
              placeholder="Placeholder"
            &gt;&lt;/v-text-field&gt;
          &lt;/v-flex&gt;
  
      &lt;/div&gt;
      &lt;v-footer app fixed&gt;
        &lt;span&gt;&amp;copy; 2017&lt;/span&gt;
      &lt;/v-footer&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data: () =&gt; ({
      drawer: null
    }),
    props: {
      source: String
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ZcKgy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZcKgy.png" alt="enter image description here"></a></p>