Can not see the scroll bulk at the end

Question

I have the following web application that is based on vuejs and vuetify:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

})

body {
  overflow: hidden;
  height: 100vh;
}

.stretch {
  height: 100%;
  width: 100%;
}

.output {
  height: 100vh;
  width: 100%;
  overflow-y: scroll;
}

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <v-app-bar color="deep-purple accent-4" dark app>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>

      <v-toolbar-title>Page title</v-toolbar-title>


    </v-app-bar>

    <!-- Sizes your content based upon application components -->
    <v-content>

      <!-- Provides the application the proper gutter -->
      <v-container class="pa-0 stretch" fluid>

        <v-row class="mb-5" justify="center">
          <v-card max-width="280">
            <v-list-item>
              <v-list-item-icon>
                <v-icon large color="teal darken-2">mdi-email</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-title class="headline">Messages</v-list-item-title>

                <v-list-item-subtitle>overview of all messages</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-card-text>
              <v-row align="center" justify="center" no-gutters>
                <v-col cols="5">
                  <p class="title">SYSTEM1</p>
                </v-col>

                <v-col cols="5">
                  <p class="subtitle-1">1111111111</p>
                </v-col>
              </v-row>

              <v-row justify="center" no-gutters>
                <v-col cols="5">
                  <p class="title">SYSTEM2</p>
                </v-col>

                <v-col cols="5">
                  <p class="subtitle-1">111111111</p>
                </v-col>
              </v-row>
            </v-card-text>
          </v-card>
          <v-card max-width="280">
            <v-list-item>
              <v-list-item-icon>
                <v-icon large color="teal darken-2">mdi-email</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-title class="headline">Messages</v-list-item-title>

                <v-list-item-subtitle>overview of all messages</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-card-text>
              <v-row align="center" justify="center" no-gutters>
                <v-col cols="5">
                  <p class="title">SYSTEM1</p>
                </v-col>

                <v-col cols="5">
                  <p class="subtitle-1">1111111111</p>
                </v-col>
              </v-row>

              <v-row justify="center" no-gutters>
                <v-col cols="5">
                  <p class="title">SYSTEM2</p>
                </v-col>

                <v-col cols="5">
                  <p class="subtitle-1">111111111</p>
                </v-col>
              </v-row>
            </v-card-text>
          </v-card>
        </v-row>


        <v-row no-gutters class="output" justify="center">
          <v-col cols="7">
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</div>

As you can see:

I can scroll down, but not until the end of the box. I marked it with red border.

What specifically is missing? On JSFiddle it is more clear:

https://jsfiddle.net/zero_coder/1k4bt9jm/4/. Do not forget to press run!!

I would like to avoid whole page scrolling and only to provide scrolling within <v-row no-gutters class="output" justify="center"> block.

Answer 1

Here I have a solution of this..

you just need to minus the height of all other elements from the 100vh height of .output

here we assume that your other elements height is 275px so you just need to minus 275px from 100vh(.output) like below

.output{
   height:calc(100vh - 275px);
}

now you just need to find out the height of all other elements like v-app-bar,v-row etc.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

})

body {
  overflow: hidden;
  height: 100vh;
}

.stretch {
  height: 100%;
  width: 100%;
}

.output {
  height: calc(100vh - 275px);
  width: 100%;
  overflow-y: scroll;
}

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <v-app-bar color="deep-purple accent-4" dark app>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>

      <v-toolbar-title>Page title</v-toolbar-title>


    </v-app-bar>

    <!-- Sizes your content based upon application components -->
    <v-content>

      <!-- Provides the application the proper gutter -->
      <v-container class="pa-0 stretch" fluid>

        <v-row class="mb-5" justify="center">
          <v-card max-width="280">
            <v-list-item>
              <v-list-item-icon>
                <v-icon large color="teal darken-2">mdi-email</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-title class="headline">Messages</v-list-item-title>

                <v-list-item-subtitle>overview of all messages</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-card-text>
              <v-row align="center" justify="center" no-gutters>
                <v-col cols="5">
                  <p class="title">SYSTEM1</p>
                </v-col>

                <v-col cols="5">
                  <p class="subtitle-1">1111111111</p>
                </v-col>
              </v-row>

              <v-row justify="center" no-gutters>
                <v-col cols="5">
                  <p class="title">SYSTEM2</p>
                </v-col>

                <v-col cols="5">
                  <p class="subtitle-1">111111111</p>
                </v-col>
              </v-row>
            </v-card-text>
          </v-card>
          <v-card max-width="280">
            <v-list-item>
              <v-list-item-icon>
                <v-icon large color="teal darken-2">mdi-email</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-title class="headline">Messages</v-list-item-title>

                <v-list-item-subtitle>overview of all messages</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-card-text>
              <v-row align="center" justify="center" no-gutters>
                <v-col cols="5">
                  <p class="title">SYSTEM1</p>
                </v-col>

                <v-col cols="5">
                  <p class="subtitle-1">1111111111</p>
                </v-col>
              </v-row>

              <v-row justify="center" no-gutters>
                <v-col cols="5">
                  <p class="title">SYSTEM2</p>
                </v-col>

                <v-col cols="5">
                  <p class="subtitle-1">111111111</p>
                </v-col>
              </v-row>
            </v-card-text>
          </v-card>
        </v-row>


        <v-row no-gutters class="output" justify="center">
          <v-col cols="7">
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</div>

Answer 2

Your body has an overflow: hidden rule while your .output has a height: 100vh and overflow-y: scroll rules.

Just remove those three and you're done

Your fiddle updated

This is because you set your body's height to 100vh, so all of the available space in the viewport. Then you set the same rule to your .output which is lower in the layout and therefore hidden when overflowing the body.