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

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.

[johnleider]

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

[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>