Vuetify: [Feature request] Add "shrink" and "grow" props to v-flex

[sindrepm]

I really like how the grid component can be used to create flexible layouts with multiple columns, however I often find myself just wanting a two-column layout where one column is fixed and the other one fills the remaining space. I am struggling to implement this with the current v-flex/v-layout since it expects a fixed percentage for each column/row. I have therefore have had to create my own set of CSS classes to wrap some basic flexbox functionality.

Now with the recent overhaul of the grid system I think almost all my usecases could be solved with the default Vuetify implementation, allowing me to get rid of my custom CSS. I am just missing one small thing:

Instead of having to specify a percentage for v-flex (e.g. md6), it should allow props shrink or grow which will simply override the default flex-shrink/-grow for the element. This will allow me to create layouts such as this: https://codepen.io/anon/pen/zENeda

The extra CSS needed is really simple:

.flex {
  &.grow {
    flex-grow: 1;
    flex-shrink: 0;
  }
  &.shrink {
    flex-grow: 0;
    flex-shrink: 1;
  }
}

If this is already possible using the existing functionality, I apologize and would appreciate an example.

• What will it allow you to do that you can't do today?

Create more _flexible_ flexbox layouts (doh!)

• How will it make current work-arounds straightforward?

Currently I have to rely on some custom CSS classes to get the layout right. With these props added it will be more intuitive.

• What potential bugs and edge cases does it help to avoid?

I try to keep my CSS to a minimum. This will allow me to remove a few extra classes.

[bkpratt84]

I was working on this and was able to achieve the same result with less CSS than what is in the example code pen. Can anyone think of any reasons that my changes wouldn't work?
https://codepen.io/bkpratt84/pen/eGWzxo

[sindrepm]

I agree, the CSS can probably be simplified some to achieve the same. There are also other ways to implement this particular example.

.flex gets flex-grow: 1 and flex-shrink: 1 by default so .flex.grow is probably redundant. It was provided just for completeness.

After a second thought, I wonder whether it would be a better solution to change the default .flex class to:

.child-flex>*, .flex {
    flex: 0 1 auto;
}

Which makes the element not take up more space than needed for their content if no columns are given. This is also the default value in the spec.

This will make the implementation more straight-forward as we can remove the explicit shrink prop and just add grow to any elements that should fill the remaining space of the container.

New example pen:
https://codepen.io/anon/pen/RLVpdJ

[bkpratt84]

Yes, I agree that would be a nice solution. Only downside might be breaking changes to someone's layout using v-flex but is an easy fix.

@johnleider Which solution would you prefer?

[johnleider]

This has been added in 1.0-alpha. Docs have not been updated yet.

[ghost]

@johnleider Is this added to the docs? What do you call it? Does it includes screen prefixes?

[hereiscasio]

So how can i use _vuetify_'s flex-grow API at now ?

i have no idea, because i don't see such API in Docs

[ghost]

@hereiscasio Don't expect much from docs. Use it like:
<v-flex grow> Grow section </v-flex> <v-flex shrink> Shrink section </v-flex>

[johnleider]

Hey guys, thank you for your patience on this, I'll put something together tomorrow.

[milost1982]

Has this been added to the documentation? I can't see it on:

• v1 docs: https://v1.vuetifyjs.com/en/layout/grid
• v2 docs: https://vuetifyjs.com/en/components/grids#grid-system

I have legacy app with Vuetify 1.x that I need to maintain and needed this feature and was able to solve this because of @atilkan comment (thanks!) but lack of documentation update is really worrisome.

[smarwei]

Maybe this is what you a searching for:
https://vuetifyjs.com/en/styles/flex