Material Design Lite с Vuejs

Question

Я пытаюсь создать карточки для панели инструментов в vuejs, но основной div переполняется. Мой компонент vue выглядит следующим образом.

<template>
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
            mdl-layout--fixed-header">
        <header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
            <div class=" headerrow mdl-layout__header-row">
                <span class="mdl-layout-title">Home</span>
                <div class="mdl-layout-spacer"></div>
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
                    <label class="mdl-button mdl-js-button mdl-button--icon" for="search">
                        <i class="material-icons">search</i>
                    </label>
                    <div class="mdl-textfield__expandable-holder">
                        <input id="search" class="mdl-textfield__input" type="text">
                        <label class="mdl-textfield__label" for="search">Enter your query...</label>
                    </div>
                </div>
                <button id="hdrbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
                    <i class="material-icons">more_vert</i>
                </button>
                <ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" 
for="hdrbtn">
                    <li class="mdl-menu__item">
                        About
                    </li>
                    <li class="mdl-menu__item">
                        Contact
                    </li>
                    <li class="mdl-menu__item">
                        Legal information
                    </li>
                </ul>
            </div>
        </header>

        <div class="drawer mdl-layout__drawer mdl-color--white mdl-color-text--blue-grey-50">
            <header class="demo-drawer-header">
                <div class="logo">
                </div>
            </header>
            <nav class="mdl-navigation mdl-color--white-800">
                <a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">dashboard</i>Dashboard</a>
            </nav>
        </div>

        <main class="mdl-layout__content mdl-color--grey-100 demo-content">
            <div class="mdl-grid demo-content">
                <div class="mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
                    <div v-for="stats in statsCards" :key="stats.title" class="mdl-cell--4-col">
                        <div slot="header">
                            <img class="avatar" :src="stats.picture">
                        </div>
                        <div slot="content" class="numbers">
                            <p>Name: {{ stats.name }}</p>
                            <p>PI: {{ stats.id }}</p>
                            <p>SC:{{ stats.sc }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
export default {
    name: "Dashboard",
    components:{
    },
    props: {
        title: String,
        subTitle: String
    },
    data() {
        return {
            statsCards: [
                {
                    picture: 'https://lh3.googleusercontent.com/proxy/7evdnBmX_e- 
7P6BPwlVKgfr7liw6OVno34Onq_Ux2zTNu0lxPOscwRMrQPINT8XibTEQDuE-QGfNR9qDLSVwRXRFklx-HTk',
                    name: "aaa",
                    id: "001",
                    sc: "22744"
                },
                {
                    picture: 'https://lh3.googleusercontent.com/proxy/7evdnBmX_e- 
7P6BPwlVKgfr7liw6OVno34Onq_Ux2zTNu0lxPOscwRMrQPINT8XibTEQDuE-QGfNR9qDLSVwRXRFklx-HTk',
                    name: "abbb",
                    id: "001",
                    sc: "22744"
                },
                {
                    picture: 'https://lh3.googleusercontent.com/proxy/7evdnBmX_e- 
7P6BPwlVKgfr7liw6OVno34Onq_Ux2zTNu0lxPOscwRMrQPINT8XibTEQDuE-QGfNR9qDLSVwRXRFklx-HTk',
                    name: "ccc",
                    id: "001",
                    sc: "22744"
                },
                {
                    picture: 'https://lh3.googleusercontent.com/proxy/7evdnBmX_e- 
7P6BPwlVKgfr7liw6OVno34Onq_Ux2zTNu0lxPOscwRMrQPINT8XibTEQDuE-QGfNR9qDLSVwRXRFklx-HTk',
                    name: "ccc",
                    id: "001",
                    sc: "22744"
                },
                {
                    picture: 'https://lh3.googleusercontent.com/proxy/7evdnBmX_e- 
7P6BPwlVKgfr7liw6OVno34Onq_Ux2zTNu0lxPOscwRMrQPINT8XibTEQDuE-QGfNR9qDLSVwRXRFklx-HTk',
                    name: "ddd",
                    id: "001",
                    sc: "22744"
                },        {
                    picture: 'https://lh3.googleusercontent.com/proxy/7evdnBmX_e- 
7P6BPwlVKgfr7liw6OVno34Onq_Ux2zTNu0lxPOscwRMrQPINT8XibTEQDuE-QGfNR9qDLSVwRXRFklx-HTk',
                    name: "eee",
                    id: "001",
                    sc: "22744"
                },        {
                    picture: 'https://lh3.googleusercontent.com/proxy/7evdnBmX_e- 
7P6BPwlVKgfr7liw6OVno34Onq_Ux2zTNu0lxPOscwRMrQPINT8XibTEQDuE-QGfNR9qDLSVwRXRFklx-HTk',
                    name: "xxx",
                    id: "001",
                    sc: "22744"
                },
                {
                    picture: 'https://lh3.googleusercontent.com/proxy/7evdnBmX_e- 
7P6BPwlVKgfr7liw6OVno34Onq_Ux2zTNu0lxPOscwRMrQPINT8XibTEQDuE-QGfNR9qDLSVwRXRFklx-HTk',
                    name: "zzz",
                    id: "001",
                    sc: "22744"
                }
            ]
        };
    }
};
</script>
<style>
  .demo-drawer-header {
    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 16px;
    height: 64px;
    color: #3f51b5;
    background-color: white;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 
rgba(0,0,0,.12);

  }
  .mdl-layout__header-row{
    color: #3f51b5;
    background-color: white;
  }
  .demo-content {
    color: black;
    table-layout:fixed;
    width: 100vw;
    position: absolute;

  }
.cards{
  width: 100vh;
  color: black;
}
  .cardicon{
    background-color: yellow;
  }
  .avatar {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    border-radius: 50%;
  }
  .logo{
    max-width: 100%;
    width: 160px;
    min-height: 9.2vh;
    height: 11.2vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    background: url('../../assets/images/arifu-logo.png') no-repeat center center;
    background-size: 70%;
    background-color: #fff;
  }
</style>