How to embed Vuetify app in page with height fitting the content and not affecteding css global scope - v-app vs v-layout

I want to have a vuetify app I want to embed in a webpage with other stuff. Thus I have essentially two requirements:

cover only has much height as needed for the content
do not affect css scope outside of the vuetify application

To what I read v-app is used by vuetify internally to scope css classes and thus I guess the way to achieve requirement number 2. However v-app always covers full height even if I set :full-height="false" (As you can see in my sample: https://play.vuetifyjs.com/#eNqlkc9OwzAMxl/F5DKQlgaxWxkIbrwBB8qha90tkH9K3KFp6rvjtENMG4dJXCrFn/37Prtve/EcQrHtUZRiSWiDqQkfKwew3Mo6BEi0M/hQiVXdfK6j710rG298LCO29xvU6w2VnSYuOkJHlYCy642Rk8SDXW0SVmJkAkxfAMJEsN/btB6GX2WpRlPuXaqjMPxMTdSBICH1WdY2+MgAiNjBAF30Fma8xSw3cxSGMxoesn49e0FjPLz6aNqr2U2GTzgGibmYWNLWofhI3vEh9jlLdRBSJUoYK7nGHvldiQ1RSKVSTet4rEWjt7FwSMoFq564TcXekbYoW2+fFsWiuJUrpLpYqFYnOlYLTFauov9KGJlVifmRG+lud4HjoZON7oq7yeFQkqZepWxxhlbst8UoI7oWI8ZLFzsZ+2O5k46zBXMI/u0DX99o95lODt+k8ehvP1n/tfkIy6T3bDjMxXFcDjDOifdvCHgIIQ==)

Thus I wonder how to best bring these two together. Any ideas

Thanks Tom

Solution

Just remove the min-height from .v-application__wrap:

  .v-application .v-application__wrap{
    min-height: unset;
  }

(see playground)

Note however that Vuetify is notorious for not scoping styles (just place a button outside v-app, see how it looks). You can disable some of it, like css reset with SASS variables, but I'd be surprised if you get it to not bleed over at all.