Vuetify: [Documentation] Unclear how to create column direction layout in grid

[b-strauss]

Environment

Browsers: Chrome 76.0.3809.132
OS: Windows 10

Steps to reproduce

In version 1 it was possible to produce a column layout with.

<v-container>
  <v-layout column>
    <v-flex></v-flex>
    <v-flex></v-flex>
    <v-flex></v-flex>
  </v-layout>
</v-container>

It is unclear how to do this with v-row and v-col. The column prop doesn't exist anymore. There are the new flexbox classes. But if I use them this results in:

<v-container>
  <v-row class="flex-column">
    <v-col></v-col>
    <v-col></v-col>
    <v-col></v-col>
  </v-row>
</v-container>

Now I have an element called row that is in reality a column. Is this the intended usage?

Expected Behavior

Documentation for how to migrate a column layout.

Actual Behavior

No documentation for how to migrate a column layout.

Reproduction Link

https://vuetifyjs.com/en/components/grids

Other comments

[MajesticPotatoe]

Should be covered in #8888
also you can do this.

<v-container>
    <v-row>
        <v-col cols=12>1</v-col>
        <v-col cols=12>2</v-col>
        <v-col cols=12>3</v-col>
    </v-row>
</v-container>

[jacekkarczmarczyk]

@MajesticPotatoe that's not the same as column layout

@b-strauss new flex was based on bootstrap which apparently doesn't care much about column layout, or at least i can't find a good example. Adding flex-column class may be not enough in some cases: https://codepen.io/jkarczm/pen/vYBROEj

[b-strauss]

<v-container>
    <v-row>
        <v-col cols=12>1</v-col>
        <v-col cols=12>2</v-col>
        <v-col cols=12>3</v-col>
    </v-row>
</v-container>

As @jacekkarczmarczyk pointed out this isn't the same as column. It's impossible to flex-wrap with this. As far as I can tell the column feature has no replacement in v2.

[cecilwei]

After comparing to the layout properties in between 1.5 and 2.0., currently what works for me is the following classes
<v-row class="fill-height flex-column flex-nowrap"> </v-row>

To shrink a certain <v-col>, the shrink class is still necessary.

I am still struggling in the migration process from 1.5 to 2.0. I have a feeling that the previous layout system is more convenient.

Kindly suggest a better solution for vertical layout with shrink / grow needs for each row in vuetify 2.0 if there is any.

[swc]

Why is this issue closed? The provided solution does not properly address the issue.

[Feofilakt]

Kindly suggest a better solution for vertical layout with shrink / grow needs for each row in vuetify 2.0 if there is any.

    <v-container>
      <div class="d-flex flex-column" style="height: 200px">
        <div class="red">bla</div>
        <div class="green flex-grow-1">bla</div>
        <div class="blue">bla</div>
      </div>
    </v-container>