[Bug Report] v-divider (inset) use margin instead of max size and remove space.

[infacto]

Environment

Vuetify Version: 2.3.8
Vue Version: 2.6.11
Browsers: Chrome 84.0.4147.125
OS: Windows 10

Steps to reproduce

1. Create a layout with a grid.
2. Add divider.
3. See that divider takes space and forces wrapping layout. Remove space with negative margin.
4. See that the max-width / max-height calculation does not work correctly. Use margin instead.

Expected Behavior

It's possible to remove the space of a border in this case of a line divider. Could be an option.

Actual Behavior

The border takes space and breaks by layout. Removing that space results in a wrong compution of max-width / max-height.

Reproduction Link

https://codepen.io/infacto/pen/rNexgJN

Other comments

Regardless of my case, consider to use margin only without max-width / max-height.
What do you think about? I think this is a more solid solution.
And removing space by negative margin also could be a great solution. Maybe as option (attribute like inset).

My Steps

Without any hacks

Remove space.

Use margin instead of max-width / max-height

My final SCSS

.v-divider--inset {
  max-width: initial !important;
  max-height: initial !important;
  &:not(.v-divider--vertical) {
    margin-top: -1px !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  &.v-divider--vertical {
    margin-left: -1px !important;
    margin-bottom: 8px !important;
  }
}

This only adds some styles to the build-in styles of Vuetify.
For example: Margin left and top is already set that framework.
So, set all styles in the final solution to have complete styles.

I like Vuetify and value you expert opinion. Margin only (without max-size) is a more solid way to do that, or not? And divider without spaces are more flexible to use in layout. What do you think about?

[johnleider]

resolved by #12993