I have a website on which one of the pages should not be scrollable (the entire page should fit on the client's screen). On this site I need to have a list of selectable objects in a column, which could potentially be quite large (it will certainly eventually overflow the screen)
I have stored these items in a <v-list> component and ordered it to scroll when it overflows. The problem is however is that it is forcing its parent column to increase in size when the number of <v-list-item> elements is too high, destroying the non-scrollable page layout. It seems to be because all of the actual <v-list-item> components are still being rendered, which is stretching out the <v-list>, despite the fact that it is set to overflow when it reaches 100% of its parent height.
I am able to sort of fix this by defining max-height in terms of px. But this is not an acceptable solution because it needs to be fully responsive.
This is demonstrated in the codepen. The list in the purple column (initially commented out) should make the list scroll when it becomes larger than the purple column's height. But, instead, it stretches out the entire page height and makes everything render with a different height before finally starting to scroll.
The orange column is basically what I want, but obviously with max-height being defined in px it wouldn't necessarily be right on everyone's screen. But it should look sort of like this:
All colours are just for referencing.
As a final note, we did find some oddities about the fill-height parameter being used in <v-container>, apparently it is deprecated? But it was the only way we could consistently get the full page height to render properly before adding everything else.