Vuetify: changing min-height of v-application--wrap

I am using a vuetify component as a widget on a page along with another content after the widget. However, I have too much free space between the widget and the rest of the page. The vuetify app takes too much height and I can't figure out how to remove it.

Here's how it look in the browser.

I have tried to override the css of App.vue in the following way but it doesn't work. Any suggestions?

<style scoped>
[data-vuetify] {
  overflow-y: hidden;
}
[data-vuetify] .v-application--wrap {
  min-height: 0vh !important;
}
</style>

Here's how App.vue looks like:

<template>
  <div data-vuetify>
    <v-app id="app">
      <router-view></router-view>
    </v-app>
  </div>
</template>

<style scoped>
section {
  margin: 10px 0;
}
[data-vuetify] {
  overflow-y: hidden;
}
[data-vuetify] .v-application--wrap {
  min-height: 0vh !important;
}
</style>

Here is the solution that worked for me.

<style scoped lang="scss">
 ::v-deep .v-application--wrap {
    min-height: fit-content;
  }
</style>