[Bug Report][4.0.1] Vertical Divider Causes Grid to Overflow

[jaketig]

Environment

Vuetify Version: 4.0.1
Vue Version: 3.5.29
OS: Windows 10 (current)

Steps to reproduce

1. Add a vertical divider bewteen 2 v-cols

Expected Behavior

Vertical dividers should be able to be placed between V-Cols

Actual Behavior

Adding a vertical divider causes the grid to wrap

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

Toggling the version from 3.12.2 to 4.0.1 in the reproduction link illustrates the issue

[J-Sek]

Thanks for posting. I bet it will be a common scenario.

Workarounds (from Discord discussion) depend on the use case:

• drop cols to make the items adapt [1]
• or set negative margins on dividers [2]
• you can also set horizontal gap to 25px making the spaces perfectly 12px [3]
• restoring legacy mode using snippet from the docs is also a good idea if you have more code and behavior coded around a certain component and it is too brittle to change [4]

Not sure if we are going to add any support for this though..

[J-Sek]

Also on a table: gap decoration, could still be used as a progressive enhancement.