mouse wheel not working in v-dialog with css overflow set as overlay

Question

Reproduction Link: https://codepen.io/kingyue737/pen/BaVdjmg

This repro is modified from official example https://vuetifyjs.com/en/components/dialogs/#scrollable

The only difference is that I add overflow: overlay to v-card-text in the dialog:

<!-- line 22 in codepen -->
<v-card-text style="height: 300px; overflow-y: overlay">

Then I can no longer scroll by mouse wheel. I can't understand why. Any help would be appreciated.

Answer 1

Remove overflow-y: overlay from <v-card-text...

eg:

<v-card-text style="height: 300px;">