title: How to get a vuetify data table to span the entire width of a container when it is inside a card?
body: <p>I have a Vuetify data table that is nested inside a v-card so that I can enable an inline search on the data table, but this is causing it to shrink down and only take up a small amount of the overall container whereas it was filling the entire container when not nested in the v-card.</p>
  
  <p>I have reproduced a minimal example of this on codepen at <a href="https://codepen.io/bigtunacan/project/editor/XGRpVL" rel="noreferrer">https://codepen.io/bigtunacan/project/editor/XGRpVL</a></p>
  
  <p>The main area of concern though is here.</p>
  
  <p>
        
          </p>
  
  <pre><code>      &lt;v-list-tile @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 @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;Candy Bars&lt;/v-toolbar-title&gt;
    &lt;/v-toolbar&gt;
  
    &lt;v-content&gt;
      &lt;v-container fluid fill-height&gt;
  
      &lt;template&gt;
        &lt;v-card&gt;
          &lt;v-card-title&gt;
            Routes
            &lt;v-spacer&gt;&lt;/v-spacer&gt;
            &lt;v-text-field append-icon="search" label="Search" single-line hide-details v-model="search"&gt;&lt;/v-text-field&gt;
          &lt;/v-card-title&gt;
          &lt;v-data-table v-bind:headers="headers" :items="routes" :search="search" hide-actions class="elevation-1"&gt;
            &lt;template slot="items" slot-scope="props"&gt;
              &lt;td&gt;&lt;router-link :to="{ name: 'route', params: {id: props.item.id}}"&gt;{{ props.item.name }}&lt;/router-link&gt;&lt;/td&gt;
              &lt;td&gt;{{ props.item.agency }}&lt;/td&gt;
            &lt;/template&gt;
          &lt;/v-data-table&gt;
        &lt;/v-card&gt;
      &lt;/template&gt;
  
      &lt;/v-container&gt;
    &lt;/v-content&gt;
  
    &lt;v-footer app fixed&gt;
      &lt;span&gt;&amp;copy; 2017&lt;/span&gt;
    &lt;/v-footer&gt;
  
  &lt;/v-app&gt;    
  </code></pre>