fix(VDivider): visiblity in container with dynamic height

[J-Sek]

Description

Assuming <v-divider vertical> makes sense only inside flexbox container, the height: auto allows align-self: stretch to take effect when container does not have explicit height.

Example in docs does not expose the issue, because d-flex gets additional explicit height, but in real life, we usually leave height to be dynamic and determined based on the children height.

After the change I did not notice any negative effects, but I may not know about use cases outside flexbox.

fixes #19827

[johnleider]

This ended up breaking vertical dividers that use "align-self-center" within containers that have a specified height. https://play.vuetifyjs.com/#eNptUMFOwzAM/RUTCRUkSjlwQt0kbvwBB8IhpG6J5CaR4/Yy7d+Xpd3USbtE7z3H79n+OajEtvmM8XWeUH2oVnCMZAT32gO0c21iLPBC6j/Dq1CkFI1F3rfNFWq/KXdudh0yzMjirCEg9IP877R6f3vUCiyZlDIz5AZfJ6S+tugFWaviufbfmt7LLKUsbEdcecZts9kr02TZRYGEMi3ruTEGFjgAYw9H6DmMUOWTVEuwDT4JjGmA3fnHU/WFRAG+A1P3UD2fAxbLbKaOL34iKs/vCWOPdNg=

[J-Sek]

@johnleider I can see that translating length prop into max-height or max-width (depending on orientation) is a 3 year old decision, but if we could change it to height and width, the example use case would work. Are there any arguments against this idea?

edit 1: Quick workaround would be h-100 class next to align-self-center. Although it would be quite unintuitive.

edit 2: There was this guy in 2020 (#12054) with use case similar to this. Nowdays, his code does not require any additional styles (if we ignore ml-9 to center the line for mobile viewport). Do we know which is more popular? inset or length + .align-self-center?

[johnleider]

I feel having to use the utility classes is unintuitive. Whatever changes are made, we should probably add some e2e tests to make sure this doesn't happen again. For now, I'm not sure the best path, however, I'm leaning towards changing to width/height from max width/height.

[J-Sek]

I have spent a bit of time reviewing paid themes based on Vuetify and found 2 cases where going back to height: 100% would make the divider disappear [1], [2]. So the most sensible option seems to be an update to length prop. The PR includes couple of test cases, let me know if they are an overkill for such a small component. They run pretty fast on my machine, but I don't want to impact CI/CD processing times more than it is necessary.

edit: Two more test cases will detect changing back to inherit. It appears that height: inherit was not breaking any of the scenarios that were originally implemented. The commit 72e5319 replacing inherit is not linked to any scenario, so I am open to suggestions if you'd feel like we need more.

[johnleider]

Want to take this under your wing @J-Sek ?