在这种情况下，如何让 v-flex 正确使用填充高度？答案

【问题标题】：How can I get v-flex to use fill height correctly in this scenario?在这种情况下，如何让 v-flex 正确使用填充高度？
【发布时间】：2019-06-26 18:22:22
【问题描述】：

我正在尝试将填充高度用于 v-flex，但它似乎不起作用。不知道我错过了什么。

这是代码笔：https://codepen.io/ccasad/pen/MMEORo

我希望紫色框的底部与橙色框的底部对齐，青色框的底部与橙色框的底部对齐。

  <v-container fluid grid-list-lg text-xs-center>

    <v-layout row wrap>

      <v-flex d-flex xs6 style="background-color:green;">
          Top left
      </v-flex>
      <v-flex d-flex xs6 style="background-color:blue;">
          Top right
      </v-flex>

      <v-flex d-flex xs3 fill-height style="background-color:purple;">
          Bottom left
      </v-flex>
      <v-flex d-flex xs6 style="background-color:tan;">
        <v-layout row wrap>
          <v-flex d-flex xs12 style="background-color:yellow;">
              Bottom middle top<br>more text
          </v-flex>
          <v-flex d-flex xs12 style="background-color:red;">
              Bottom middle middle<br>more text
          </v-flex>
          <v-flex d-flex xs12 style="background-color:orange;">
              Bottom middle bottom<br>more text
          </v-flex>
        </v-layout>
      </v-flex>
      <v-flex d-flex xs3 fill-height style="background-color:cyan;">
          Bottom right
      </v-flex>
    </v-layout>

  </v-container>

【问题讨论】：

标签： vuetify.js

【解决方案1】：

只需从紫色和青色v-flex 元素中删除fill-height 属性即可。

PS - v-flex 没有 fill-height 属性

PPS - v-flex 也没有 d-flex 属性，所以也放弃它

【讨论】：

【解决方案2】：

不确定是否有帮助，但您可以将 v-flex 替换为 div 并使用 display:flex 为其设置样式

<div id="app">
  <v-app id="inspire">    
  <v-container fluid grid-list-lg text-xs-center>        
    <v-layout row wrap>
      <v-flex d-flex xs6 style="background-color:green;">
          Top left
      </v-flex>
      <v-flex d-flex xs6 style="background-color:blue;">
          Top right
      </v-flex>
      <div xs3 fill-height style="background-color:purple;display:flex;align-items:stretch;align-contents:stretch;flex-grow:1;">
          Bottom left
      </div>
      <v-flex d-flex xs6 style="background-color:tan;">
        <v-layout row wrap>
          <v-flex d-flex xs12 style="background-color:yellow;">
              Bottom middle top<br>more text
          </v-flex>
          <v-flex d-flex xs12 style="background-color:red;">
              Bottom middle middle<br>more text
          </v-flex>
          <v-flex d-flex xs12 style="background-color:orange;">
              Bottom middle bottom<br>more text
          </v-flex>
        </v-layout>
      </v-flex>
      <div xs3 fill-height style="background-color:cyan;display:flex;align-items:stretch;align-contents:stretch;flex-grow:1;">
          Bottom right
      </div>
    </v-layout>
  </v-container>

【讨论】：