title: Vuetify v-tabs v-tab-item overflows window width
body: <p>I have a Vue component that I route to from my main app and when I resize the window the v-tab-item extends past the window's width (not even a side scroll bar). My question is how do I make the router-view respect the width of the app (70%) and make sure that when routed to my component does not exceed the width of the app?</p>
  
  <p><a href="https://codepen.io/StuckDuckF/pen/dyYjqYO" rel="nofollow noreferrer">Codepen reproducing the issue</a></p>
  
  <pre><code>&lt;template&gt;
    &lt;v-container&gt;
      &lt;v-tabs vertical center-active color="light-green darken-1"&gt;
        &lt;v-tab&gt;Multi-Model Ensemble&lt;/v-tab&gt;
        &lt;v-tab&gt;Individual Models&lt;/v-tab&gt;
        &lt;v-tab&gt;PM2.5 evaluation&lt;/v-tab&gt;
        &lt;v-tab&gt;ICAP Smoke AOD&lt;/v-tab&gt; 
        &lt;v-tab&gt;Fire Danger Risk&lt;/v-tab&gt; 
        &lt;v-tab&gt;Fire Weather Index&lt;/v-tab&gt; 
        &lt;v-tab&gt;Sub seasonal outlook&lt;/v-tab&gt; 
        &lt;v-tab&gt;Geomet Demo&lt;/v-tab&gt;
  
  
        &lt;v-tab-item&gt;
          &lt;v-card&gt;
            &lt;v-card-title&gt;
              North American Regional VFSP-WAS Demo - Multi-Model Forecast Ensemble
            &lt;/v-card-title&gt;
  
            &lt;v-card-subtitle&gt;
              Multi-Model ensemble
            &lt;/v-card-subtitle&gt;
  
            &lt;v-container fluid&gt;
              &lt;v-row align="center" justify="center"&gt;
                &lt;v-card width="45%"&gt;
                  &lt;v-img
                    alt="GIF 1"
                    class="shrink mr-2"
                    contain
                    src="../assets/gifs/composite_20200207T12Z+1-46h_northAmerica_lcc_Avg.gif"
                    transition="scale-transition"
                    width="800"/&gt;
                  &lt;/v-card&gt;
                  &lt;v-card width="45%"&gt;
                  &lt;v-img
                    alt="GIF 2"
                    class="shrink mr-2"
                    contain
                    src="../assets/gifs/composite_20200207T12Z+1-46h_northAmerica_lcc_Ext.gif"
                    transition="scale-transition"
                    width="800"/&gt;
                  &lt;/v-card&gt;
              &lt;/v-row&gt;
              &lt;v-row align="center" justify="center"&gt;
                &lt;v-card width="45%"&gt;
                  &lt;v-img
                    alt="GIF 1"
                    class="shrink mr-2"
                    contain
                    src="../assets/gifs/composite_20200207T12Z+1-46h_northAmerica_lcc_Med.gif"
                    transition="scale-transition"
                    width="800"/&gt;
                  &lt;/v-card&gt;
                  &lt;v-card width="45%"&gt;
                  &lt;v-img
                    alt="GIF 2"
                    class="shrink mr-2"
                    contain
                    src="../assets/gifs/composite_20200207T12Z+1-46h_northAmerica_lcc_StDev.gif"
                    transition="scale-transition"
                    width="800"/&gt;
                  &lt;/v-card&gt;
              &lt;/v-row&gt;
            &lt;/v-container&gt;
  
            &lt;v-card-text&gt;
              The animations show a forecast of up to 48 hours at 3-hourly intervals.
  
  
  The multi-model products have been generated from various atmospheric chemical and/or aerosol transport models which are represented using a common geographical domain and spatial resolution.
  
  
  There are two products describing centrality (multi-model median and mean) and two products describing the spread (standard deviation and range of variation).
  
  
  The multi-model ensemble regional members are ECCC FireWork and NOAA NCEP NAQFC. The global members are ECMWF IFS CAMS, FMI SILAM, JMA MASINGAR and NASA GEOS-FP.
  
  
  It is important to note that different models may have very different characteristics (e.g. global or regional models, horizontal and vertical resolutions, smoke emission characteristics, physics and chemistry parameterisations, presence or absence of smoke assimilation, feedback to the meteorological model etc.) In addition, some of these predictions are experimental or produced for research purposes only. Information on the various models’ configuration can be found on their respective websites and in the literature.
            &lt;/v-card-text&gt;
          &lt;/v-card&gt;
        &lt;/v-tab-item&gt;
  
        &lt;v-tab-item&gt;
          &lt;v-card&gt;
            &lt;v-card-title&gt;
              North American Regional VFSP-WAS Demo - Individual Models
            &lt;/v-card-title&gt;
  
            &lt;v-container fluid&gt;
              &lt;v-row align="center" justify="center"&gt;
                &lt;v-card width="45%"&gt;
                  &lt;v-img
                    alt="GIF 1"
                    class="shrink mr-2"
                    contain
                    src="../assets/gifs/RAQDPS_20200207T12Z+1-46h_northAmerica_lcc_AF.gif"
                    transition="scale-transition"
                    width="800"/&gt;
                  &lt;/v-card&gt;
                  &lt;v-card width="45%"&gt;
                  &lt;v-img
                    alt="GIF 2"
                    class="shrink mr-2"
                    contain
                    src="../assets/gifs/CMAQ_20200207T12Z+1-46h_northAmerica_lcc_Band1.gif"
                    transition="scale-transition"
                    width="800"/&gt;
                  &lt;/v-card&gt;
              &lt;/v-row&gt;
              &lt;v-row align="center" justify="center"&gt;
                &lt;v-card width="45%"&gt;
                  &lt;v-img
                    alt="GIF 1"
                    class="shrink mr-2"
                    contain
                    src="../assets/gifs/CAMS_20200207T12Z+1-46h_northAmerica_lcc_Band1.gif"
                    transition="scale-transition"
                    width="800"/&gt;
                  &lt;/v-card&gt;
                  &lt;v-card width="45%"&gt;
                  &lt;v-img
                    alt="GIF 2"
                    class="shrink mr-2"
                    contain
                    src="../assets/gifs/GEOS_20200207T12Z+1-46h_northAmerica_lcc_Band1.gif"
                    transition="scale-transition"
                    width="800"/&gt;
                  &lt;/v-card&gt;
              &lt;/v-row&gt;
  
              &lt;v-row align="center" justify="center"&gt;
                &lt;v-card&gt;
                  &lt;v-img
                    alt="GIF 1"
                    class="shrink mr-2"
                    contain
                    src="../assets/gifs/SILAM_20200207T12Z+1-46h_northAmerica_lcc_Band1.gif"
                    transition="scale-transition"
                    width="800"/&gt;
                &lt;/v-card&gt;
              &lt;/v-row&gt;
            &lt;/v-container&gt;
  
            &lt;v-card-text&gt;
              &lt;p&gt;
                The animations show a forecast of up to 48 hours at 3-hourly intervals.
              &lt;/p&gt;
              &lt;br&gt;
              &lt;p&gt;
                The individual products have been generated from various atmospheric chemical and/or aerosol transport models which are represented using a common geographical domain and spatial resolution.
              &lt;/p&gt;
              &lt;br&gt;
              &lt;p&gt;
                There are two products describing centrality (multi-model median and mean) and two products describing the spread (standard deviation and range of variation).
              &lt;/p&gt;
              &lt;br&gt;
              &lt;p&gt;
                The multi-model ensemble regional members are ECCC FireWork and NOAA NCEP NAQFC. The global members are ECMWF IFS CAMS, FMI SILAM, JMA MASINGAR and NASA GEOS-FP.
              &lt;/p&gt;
              &lt;br&gt;
              &lt;p&gt;
                It is important to note that different models may have very different characteristics (e.g. global or regional models, horizontal and vertical resolutions, smoke emission characteristics, physics and chemistry parameterisations, presence or absence of smoke assimilation, feedback to the meteorological model etc.) In addition, some of these predictions are experimental or produced for research purposes only. Information on the various models’ configuration can be found on their respective websites and in the literature.
              &lt;/p&gt;
            &lt;/v-card-text&gt;
          &lt;/v-card&gt;
        &lt;/v-tab-item&gt;
  
        &lt;v-tab-item&gt;
          &lt;v-card&gt;
            &lt;v-card-title&gt;
              North American Regional VFSP-WAS Demo - PM2.5 Evaluation
            &lt;/v-card-title&gt;
  
            &lt;v-card-text&gt;
              &lt;p&gt;
                Multi-Model ensemble members fine particulate matter concentrations forecasts are evaluated against observations from North American networks (AirNow, CAPMoN, NAPS, etc.).
              &lt;/p&gt;
  
              &lt;br&gt;
              &lt;p&gt;
                &lt;em class="warning"&gt; Coming soon:&amp;nbsp;&lt;/em&gt;
                   graphs with &lt;a href="https://aqdb.cmc.ec.gc.ca/vaqum/"&gt;VAQUM&lt;/a&gt; data. Talk with Yordan for &lt;a href="http://iweb.cmc.ec.gc.ca/~afsurdv/PlotlyExp.html"&gt; his work this summer with Plotly.&lt;/a&gt;
              &lt;/p&gt;
            &lt;/v-card-text&gt;
          &lt;/v-card&gt;
        &lt;/v-tab-item&gt;
  
  
        &lt;v-tab-item&gt;
          &lt;v-card&gt;
            &lt;v-card-title&gt;
              North American Regional VFSP-WAS Demo - ICAP Smoke AOD
            &lt;/v-card-title&gt;
  
            &lt;v-card-subtitle&gt;
              ICAP Smoke Aerosol Optical Depth
            &lt;/v-card-subtitle&gt;
  
            &lt;v-container fluid&gt;
              &lt;v-row align="center" justify="center"&gt;
                &lt;v-card width="45%"&gt;
                  &lt;v-img
                    alt="GIF 1"
                    class="shrink mr-2"
                    contain
                    src="../assets/gifs/icap_20200208T00Z+0-120H_smoke_aod_mean_northAmerica_lcc_Band1.gif"
                    transition="scale-transition"
                    width="800"/&gt;
                  &lt;/v-card&gt;
                  &lt;v-card width="45%"&gt;
                  &lt;v-img
                    alt="GIF 2"
                    class="shrink mr-2"
                    contain
                    src="../assets/gifs/icap_20200208T00Z+0-120H_smoke_aod_stdv_northAmerica_lcc_Band1.gif"
                    transition="scale-transition"
                    width="800"/&gt;
                  &lt;/v-card&gt;
              &lt;/v-row&gt;
            &lt;/v-container&gt;
  
            &lt;v-card-text&gt;
              The animations show a forecast of up to 120 hours at 6-hourly intervals.
  
  
  The International Cooperative for Aerosol Prediction (ICAP) is an international forum for aerosol forecast centres, remote sensing data providers and lead system developers to share best practices and discuss pressing issues facing the operational aerosol community. In the plots above, the ICAP Multi-Model Ensemble (MME) smoke aerosol optical depth (AOD) is used.
  
  
  This product is constructed from the following aerosol forecast systems: ECMWF CAMS, NASA GEOS-FP, NRL NAAPS, and JMA MASINGAR.
            &lt;/v-card-text&gt;
  
  
          &lt;/v-card&gt;
        &lt;/v-tab-item&gt;
  
        &lt;v-tab-item&gt;
          &lt;v-card&gt;
            &lt;v-card-title&gt;
              North American Regional VFSP-WAS Demo - Fire Danger Risk
            &lt;/v-card-title&gt;
  
            &lt;v-card-subtitle&gt;
              Fire Danger Risk Map
            &lt;/v-card-subtitle&gt;
  
            &lt;v-container fluid&gt;
              &lt;v-row align="center" justify="center"&gt;
                &lt;v-card&gt;
                  &lt;v-img
                    alt="GIF 1"
                    class="shrink mr-2"
                    contain
                    src="../assets/img/fdr20200207.png"
                    transition="scale-transition"
                    width="800"/&gt;
                  &lt;/v-card&gt;
                  &lt;v-spacer&gt;&lt;/v-spacer&gt;
                  &lt;v-card&gt;
                  &lt;v-img
                    alt="GIF 2"
                    class="shrink mr-2"
                    contain
                    src="../assets/img/legend_fdr.jpg"
                    transition="scale-transition"
                    width="800"/&gt;
                  &lt;/v-card&gt;
              &lt;/v-row&gt;
            &lt;/v-container&gt;
  
            &lt;v-card-text&gt;
              &lt;p&gt;
                Fire Danger is a relative index of how easy it is to ignite vegetation, how difficult a fire may be to control, and how much damage a fire may do.
              &lt;/p&gt;
              &lt;br&gt;
              &lt;p&gt;
                Note: These general fire descriptions apply to most coniferous forests. The national fire danger maps show conditions as classified by the provincial and territorial fire management agencies. Choice and interpretation of classes may vary between provinces. For fuel-specific fire behavior, consult the Fire Behavior Prediction maps.    
              &lt;/p&gt;
              &lt;br&gt;
                &lt;a href="https://cwfis.cfs.nrcan.gc.ca/maps/fw?type=fdr"&gt; Link to NRCan source &lt;/a&gt;
            &lt;/v-card-text&gt;
  
          &lt;/v-card&gt;
        &lt;/v-tab-item&gt;
  
        &lt;v-tab-item&gt;
          &lt;v-card&gt;
            &lt;v-card-title&gt;
              North American Regional VFSP-WAS Demo - Fire Weather Index
            &lt;/v-card-title&gt;
  
            &lt;v-card-subtitle&gt;
              Fire Weather Index Map
            &lt;/v-card-subtitle&gt;
  
            &lt;v-container fluid&gt;
              &lt;v-row align="center" justify="center"&gt;
                &lt;v-card&gt;
                  &lt;v-img
                    alt="GIF 1"
                    class="shrink mr-2"
                    contain
                    src="../assets/img/fwi-konstantinos.png"
                    transition="scale-transition"
                    width="800"/&gt;
                  &lt;/v-card&gt;
              &lt;/v-row&gt;
            &lt;/v-container&gt;
  
            &lt;v-card-text&gt;
               &lt;p&gt;
                  The Fire Weather Index is a component of the Canadian Forest Fire Weather Index (FWI) System. It is a numeric rating of fire intensity. It combines the Initial Spread Index and the Buildup Index.
                &lt;/p&gt;
                &lt;p&gt;
                  The computation of FWI depends solely on meteorological conditions.
                &lt;/p&gt;
                &lt;ul style="margin-left: 2em;"&gt;
                  &lt;li&gt;
                    &lt;p&gt;
                      Noon temperature (Celsius)
                    &lt;/p&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;p&gt;
                      Noon relative humidity (%)
                    &lt;/p&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;p&gt;
                      Accumulated Precipitation over the previous 24h, at noon (in mm)
                    &lt;/p&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;p&gt;
                      Noon wind speed (km/h)
                    &lt;/p&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;p&gt;
                      Previous days moisture fuel indices (Fine fuel, duff moisture, and drought).
                    &lt;/p&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
                &lt;br&gt;
                &lt;p&gt;
                  It is suitable as a general index of fire danger throughout the forested areas of Canada.
                &lt;/p&gt;
                &lt;a href="https://cwfis.cfs.nrcan.gc.ca/maps/fw?type=fwi"&gt; Link to NRCan source &lt;/a&gt;
            &lt;/v-card-text&gt;
          &lt;/v-card&gt;
        &lt;/v-tab-item&gt;
  
        &lt;v-tab-item&gt;
          &lt;v-card&gt;
            &lt;v-card-title&gt;
              North American Regional VFSP-WAS Demo - Subseasonal Outlook
            &lt;/v-card-title&gt;
  
            &lt;v-card-subtitle&gt;
              Subseasonal Outlook Map
            &lt;/v-card-subtitle&gt;
  
            &lt;v-container fluid&gt;
              &lt;v-row align="center" justify="center"&gt;
                &lt;v-card width="45%"&gt;
                  &lt;v-img
                    alt="GIF 1"
                    class="shrink mr-2"
                    contain
                    src="../assets/img/2020022700_054_E1_canada_I_ANOMALY@PRECIPITATION_anomaly@probability@combined@672_768.png"
                    transition="scale-transition"
                    width="800"/&gt;
                &lt;/v-card&gt;
                &lt;v-card width="45%"&gt;
                  &lt;v-img
                    alt="GIF 1"
                    class="shrink mr-2"
                    contain
                    src="../assets/img/2020022700_054_E1_canada_I_ANOMALY@TEMPERATURE_anomaly@probability@combined@666_768.png"
                    transition="scale-transition"
                    width="800"/&gt;
                &lt;/v-card&gt;
              &lt;/v-row&gt;
            &lt;/v-container&gt;
  
            &lt;v-card-text&gt;
              &lt;p&gt;
                The monthly forecast is updated each Thursday and covers the 28 days starting on the following Monday.
              &lt;/p&gt;
              &lt;br&gt;
              &lt;p&gt;
                The forecasted anomaly is produced from the average conditions forecasted over that period by the Global Ensemble Prediction System (GEPS).
              &lt;/p&gt;
              &lt;br&gt;
              &lt;p&gt;
                A 20 year climatology (1998-2017) of this prediction system obtained from a reforecast is also used in the computation of the forecast anomaly.
              &lt;/p&gt;
              &lt;br&gt;
              &lt;a href="http://collaboration.cmc.ec.gc.ca/cmc/cmoi/product_guide/docs/tech_specifications/tech_specifications_GEPS_6.0.0_e.pdf" class="bluelink"&gt; See the GEPS6.0.0 reforecast technical note  &lt;/a&gt;
            &lt;/v-card-text&gt;
          &lt;/v-card&gt;
        &lt;/v-tab-item&gt;
  
        &lt;!-- &lt;v-tab-item&gt;
          &lt;h3&gt;Smoke Forecasts&lt;/h3&gt;
          &lt;v-tabs color="light-green darken-2"&gt;
              &lt;v-tab&gt;Smoke Aerosol Optical Depth&lt;/v-tab&gt;
              &lt;v-tab&gt;PM&lt;sub&gt;10&lt;/sub&gt; Surface Concentration&lt;/v-tab&gt;
              &lt;v-tab&gt;PM&lt;sub&gt;2.5&lt;/sub&gt; Surface Concentration&lt;/v-tab&gt;
  
              &lt;v-tab-item&gt;
                &lt;h4&gt;Smoke Aerosol Optical Depth&lt;/h4&gt;
              &lt;/v-tab-item&gt;
  
              &lt;v-tab-item&gt;
                &lt;h4&gt;PM&lt;sub&gt;10&lt;/sub&gt; Surface Concentration&lt;/h4&gt;
              &lt;/v-tab-item&gt;
  
              &lt;v-tab-item&gt;
                &lt;h4&gt;PM&lt;sub&gt;2.5&lt;/sub&gt; Surface Concentration&lt;/h4&gt;
              &lt;/v-tab-item&gt;
  
          &lt;/v-tabs&gt;
        &lt;/v-tab-item&gt; --&gt;
  
        &lt;v-tab-item&gt;
            &lt;OpenLayersPlayroom /&gt;
        &lt;/v-tab-item&gt;
  
      &lt;/v-tabs&gt;
    &lt;/v-container&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import OpenLayersPlayroom from './OpenLayersPlayroom'
  
  export default {
      components: {
          OpenLayersPlayroom
      }
  }
  &lt;/script&gt;
  </code></pre>