Vuetify v-spacer has no effect

Question

In my modal , I try stick one block to the bottom of the block by using , but it has no effect. What am I doing wrong?
Example: https://codesandbox.io/s/vuetify-template-viov1?file=/src/App.vue
I also tried to solve this by adding "d-flex flex-column" to the parent's col class, but in that case size of each row is anomalous
https://codesandbox.io/s/vuetify-template-6wr6g

Thanks for any hints

user_9103301 · Answer

not sure why you are using so many rows inside columns inside rows... that's just the height of the row.

user_9129617 · Answer

This is working: https://codesandbox.io/s/vuetify-template-yns2m?file=/src/App.vue

The problems are:

Incorrect usage of v-container, v-row and v-col - causing the weird spacing issues.
There should be a fixed height container for the v-spacer to work as expected.