Vuetify grid system. How to make block placed on rest of height?

Question

How to I can make block "pink-box", placed on rest of height in Vuetify grid system? "height: 100%" work incorrect. Column flex direction and "flex: 1" break xs6 layout.

<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-md fill-height>
        <v-layout row wrap align-content-start>
          <v-flex xs6 v-for="x in 10">Text: Example {{x}}</v-flex>
          <v-flex xs12 class="pink-box">Rest height box</v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

See worked code snippet on Codepen:

https://codepen.io/profsoft/pen/wmQRvm

What does rest of height means? height: 100% fills the remaining height, is that not what you are describing? — Traxo
Yes, fills the remaining height of the visible container after the text. "height: 100%" set height of my block as height of container. As result, my block increases beyond the bottom border of the visible container, scrolling appears. — Prof

Prof Prof · Accepted Answer · 2018-04-13T01:33:13

We must use in container two nested layouts. First - column, for text block and rest height box. Second, nested - row wrap, for correct 12 point grid system placed in text block.

<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-md fill-height>
        <v-layout column>
          <v-flex>
            <v-layout row wrap align-content-start>
              <v-flex xs6 v-for="x in 10">Text: Example {{x}}</v-flex>
            </v-layout>
          </v-flex>
          <v-flex xs12 class="pink-box">Rest height box</v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

See solution code snippet on Codepen:

https://codepen.io/profsoft/pen/KoLMrz

Vuetify grid system. How to make block placed on rest of height?

1 Answers