Переполнение css не работает в div в vue. js

Question

У меня есть страница входа, но переполнение не работает в vue. js. Во время проверки, если переполнение скрыто, оно отображается без прокрутки, но когда я пишу css, оно не работает. Мой код:

<template>

<div id="app" class="scroll">
    <v-app id="inspire">

    <div style="display: flex; justify-content: space-around">
        <img width="240" height="140" src="/assets/images/profile.png">
    </div>
    <v-row align="center" justify="center">
      <v-col  cols="12" sm="8" md="4">           
        <v-card class="elevation-12" >          
          <v-card-text>
            <v-form>
              <v-text-field
                label="Email"
                name="login"
                v-model="email"
                type="text"
                ref="email"
              />

              <v-text-field
                id="password"
                label="Password"
                name="password"
                v-model="password"
                ref="password"
              />

            </v-form>            

          </v-card-text>

            <v-card-actions class="justify-center">

              <v-btn  width="300px" color="primary" v-on:click="checkForm">Login</v-btn>

          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
    </v-app>
</div>

 <script>
    //------------//
 </script>


 <style>
     div.scroll{
        overflow: hidden;
     }
 </style>

, так где же точная проблема, для которой css не работает?