如何使 div 占用父容器的剩余高度

Question

我知道以前有人问过这个问题，但我找不到任何可行的解决方案。

我需要类 .height 的 div 来获取父级的剩余高度

<div id="app">
  <v-app>
    <main>
      <v-content>
        <v-container fluid grid-list-xs>
          <v-layout row wrap>
            <v-flex xs6>
              <v-toolbar></v-toolbar>
              <div class="height"></div>
            </v-flex>
            <v-flex xs2></v-flex>
            <v-flex xs4></v-flex>
          </v-layout>
        </v-container>
      </v-content>
    </main>
  </v-app>
</div>

CSS

.height {
  display: flex;
  flex-flow: column;
  height: 100%;
  border: 1px solid orange;
}

CODEPEN 链接 https://codepen.io/anon/pen/bYGeMN

为什么显示 flex + height 100% 不工作？

我正在使用 Vuetify 库来获取关于 VueJS 的材料设计主题，但我认为这个问题与 VueJS 无关，而是与 CSS 相关。

提前致谢

Answer 1

您需要确保v-container 和v-layout 的高度设置为100%。此外，display: flex 和 flex-flow: column 需要设置在 xs6 而不是内部 div：

.container, .layout {
  height: 100%;
}

.xs6 {
  display: flex;
  flex-direction: column;
}

.height {
  flex: 1 1 auto;
}