Vuetify 网格系统。如何使块放置在其余高度上？

Question

如何使块 "pink-box" 放置在 Vuetify 网格系统的剩余高度上？ "height: 100%" 工作不正确。列弯曲方向和 "flex: 1" 打破 xs6 布局。

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

查看 Codepen 上的工作代码片段：

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

Answer 1

我们必须在容器中使用两个嵌套布局。第一列，用于文本块和剩余高度框。二、嵌套 - 换行，用于在文本块中放置正确的 12 点网格系统。

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

在 Codepen 上查看解决方案代码片段：

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

Vuetify 网格系统。如何使块放置在其余高度上？

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

vuetify.js