VuetifyJS toolbar overlays content as soon as fixed prop gets added

Question

I need to use a fixed toolbar (with an extension). Problem is that The toolbar overlays the content as soon as the fixed prop gets added. How to place the content below the toolbar? CodePen example: https://codepen.io/anon/pen/jpgjyd?&editors=101

<div id="app">
  <v-app id="inspire">
    <v-toolbar
      color="primary"
      dark
      fixed
      extended         
    >
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title slot="extension">Title</v-toolbar-title>
      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>search</v-icon>
      </v-btn>
    </v-toolbar>

    <v-layout>
    <v-flex xs1 >
      +++ FIRST LINE +++ 
      [lots of text...]
      </v-flex>
        </v-layout>
  </v-app>
</div>

Answer 1

One solution is adding app to v-toolbar and wrap v-layout inside v-content

<v-toolbar
      app
      color="primary"
      dark
      fixed
      extended         
    >
...
</v-toolbar>
<v-content>
  <v-layout>
  </v-layout>
</v-content>

Demo https://codepen.io/ittus/pen/mGdbeN?editors=1010

References: Vuetify application layout tutorial