css - 如何让 Vuetify v-flex 占用剩余的可用空间

Question

我在 v-layout(fill-height) 中有两个 flex。问题:第二个 flex 与预期的末端对齐，但第一个 flex 没有占用剩余的可用空间。

  <v-container>
      <v-layout row wrap fill-height>
        <v-flex
          xs12
          class="white--text green darken-3"
        >
            <v-card-text>I should occupy rest of the available space</v-card-text>
        </v-flex>
        <v-flex
          xs12
          align-self-end
          class="white--text blue darken-3"
        >   

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

密码本:

https://codepen.io/adatdeltax/pen/MWaapYR?editors=1000

我是 vuetify 的新手，上面的 codepen 是我迄今为止尝试过的，有没有办法让 flex1 占用剩余的可用空间。

Answer 1

使用 Vuetify 1.5:

使用 column 然后删除 xs12 属性。然后收缩/增长将按预期工作(没有额外的 CSS 或内联样式):

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout column fill-height>
        <v-flex
          grow
          class="white--text green darken-3"
        >
            <v-card-text>
              I should occupy rest of the available space
            </v-card-text>
        </v-flex>
        <v-flex
          shrink
          align-self-end
          class="white--text blue darken-3"
        >   
            <v-card-text>
              I should stay here
            </v-card-text>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

1.5 演示:https://codeply.com/p/JjD6UZdtjU

---

使用 Vuetify 2.x:

除了使用 v-row, v-col 代替 v-layout, v-flex 外，其他工作方式相同:

<div id="app">
    <v-app>
        <v-container class="fill-height">
            <v-row class="no-gutters flex-wrap flex-column fill-height">
                <v-col cols="auto" class="grow pink pa-2">
                    <h1>Content</h1>
                </v-col>
                <v-col cols="auto" class="shrink blue pa-2"> Footer </v-col>
            </v-row>
        </v-container>
    </v-app>
</div>

2.x 演示:https://codeply.com/p/07CA4jZNAl