Brtdku

The problem is simple.
I'd like to have a way to limit vertically an element, specifically a v-card, so that the whole layout remains within the size of the screen available, even if the v-card contains a lot of text, adding to the v-card a scrollbar, if needed. This without giving to any element a specific fixed height in pixels.

I will add two examples, which I made changing a bit one of the examples from the official page.

Like you'll see, everything works as intended, but if the v-card text has too much text, it, instead of gaining a scrollbar, either expands over the borders of its container, if it has the "position: absolute" as in this example https://codepen.io/anon/pen/xmvXpX?editors=1010; or forces its container and its "brothers" and the whole layout to expand over the limit of the available screen, if the "position: absolute" is removed, as in this example https://codepen.io/anon/pen/yGmPxK?editors=1010.

So I wonder if there is a way to achieve the desired result, while retaining the ability for the layout to expand to fill completely the screen smoothly, hence without using anywhere the obvious "height: Hpx" solution.

Practically I need something like the opposite of the "fit-content" to use in the v-card, something like "dont-care-about-content-and-keep-the-damn-height-you-had-at-the-start".

Here the version of the code using the "position:absolute"

<div id="app">

  <v-app id="inspire">

    <v-container fluid grid-list-sm d-flex style="height:100%">

      <v-layout row wrap>

        <v-flex d-flex xs12 order-xs5>

          <v-layout column>

            <v-flex d-flex>

              <v-card color="blue-grey" dark tile flat>

                <v-card-text>{{ lorem }}</v-card-text>

              </v-card>

            </v-flex>

            <v-flex d-flex>

              <v-card color="brown" dark tile flat>

                <v-card-text>{{ lorem }}</v-card-text>

              </v-card>

            </v-flex>

          </v-layout>

        </v-flex>

        <v-flex d-flex xs12 sm7>

          <v-layout row wrap>

            <v-flex d-flex>

              <v-card color="indigo lighten-2" dark tile flat>

                <v-card-text>{{ lorem.slice(0, 70) }}</v-card-text>

              </v-card>

            </v-flex>

            <v-flex d-flex>

              <v-layout row>

                <v-flex

                  v-for="n in 2"

                  :key="n"

                  d-flex

                >

                  <v-card

                    color="amber lighten-2"

                    tile

                    flat

                  >

                    <v-card-text>{{ lorem.slice(0, 40) }}</v-card-text>

                  </v-card>

                </v-flex>

              </v-layout>

            </v-flex>

          </v-layout>

        </v-flex>

        <v-flex d-flex xs12 sm2 child-flex>

          <v-card color="orange lighten-2" tile flat>

            <v-card-text style="overflow: auto; position: absolute">{{ lorem.slice(0, 90) }} {{lorem}}  {{lorem}} {{lorem}} {{lorem}} {{lorem}}</v-card-text>

          </v-card>

        </v-flex>

        <v-flex d-flex xs12 sm3>

          <v-card color="red lighten-2" dark tile flat>

            <v-card-text>{{ lorem.slice(0, 100) }}</v-card-text>

          </v-card>

        </v-flex>

      </v-layout>

    </v-container>

  </v-app>

</div>  

And the JS

new Vue({

  el: '#app',

  data: () => ({

    lorem: `Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.`

  })

})

Ok, after some fiddling and some more research, here is a general solution (which works for normal divs too).

The div containing the text (v-card-text, in the above example) must have "position: absolute;", the parent div (v-card, in the above example) must have "position: relative; overflow-y: auto;"

This solution, as said above, works quite generally, even if in some cases (when everything is within v-tabs, for example) it still fails, for reason still not clear.

Here is the codepen with the layout working as intended.
https://codepen.io/anon/pen/gZVqBE?editors=1010

These are the lines interested:

...

<v-card color="orange lighten-2;" style=" position: relative; overflow-y: auto;" tile flat>

            <v-card-text style="position: absolute">{{ lorem.slice(0, 90) }} {{lorem}}  {{lorem}} {{lorem}} {{lorem}} {{lorem}}</v-card-text>

...

And this is the whole code in the codepen

<div id="app">

  <v-app id="inspire">

    <v-container fluid grid-list-sm d-flex style="height:100%">

      <v-layout row wrap>

        <v-flex d-flex xs12 order-xs5>

          <v-layout column>

            <v-flex d-flex>

              <v-card color="blue-grey" dark tile flat>

                <v-card-text>{{ lorem }}</v-card-text>

              </v-card>

            </v-flex>

            <v-flex d-flex>

              <v-card color="brown" dark tile flat>

                <v-card-text>{{ lorem }}</v-card-text>

              </v-card>

            </v-flex>

          </v-layout>

        </v-flex>

        <v-flex d-flex xs12 sm7>

          <v-layout row wrap>

            <v-flex d-flex>

              <v-card color="indigo lighten-2" dark tile flat>

                <v-card-text>{{ lorem.slice(0, 70) }}</v-card-text>

              </v-card>

            </v-flex>

            <v-flex d-flex>

              <v-layout row>

                <v-flex

                  v-for="n in 2"

                  :key="n"

                  d-flex

                >

                  <v-card

                    color="amber lighten-2"

                    tile

                    flat

                  >

                    <v-card-text>{{ lorem.slice(0, 40) }}</v-card-text>

                  </v-card>

                </v-flex>

              </v-layout>

            </v-flex>

          </v-layout>

        </v-flex>

        <v-flex d-flex xs12 sm2 child-flex>

          <v-card color="orange lighten-2;" style=" position: relative; overflow-y: auto;" tile flat>

            <v-card-text style="position: absolute">{{ lorem.slice(0, 90) }} {{lorem}}  {{lorem}} {{lorem}} {{lorem}} {{lorem}}</v-card-text>

          </v-card>

        </v-flex>

        <v-flex d-flex xs12 sm3>

          <v-card color="red lighten-2" dark tile flat>

            <v-card-text>{{ lorem.slice(0, 100) }}</v-card-text>

          </v-card>

        </v-flex>

      </v-layout>

    </v-container>

  </v-app>

</div>