css - Vuetify 网格列换行填充全高

Question

在网格系统中使用 v-card 创建组件后，id 未填充到完整高度。我使用了 d-flex，但它没有按预期工作。

带有白色 v 卡的中间列应填充整个列的高度，但它堆叠在顶部。 这是所需功能的图片:

这是代码，在 Codepen 中您可以看到它没有延伸到整个列的高度，而是嵌套在顶部。

var car = Vue.component('car', {

  template: `
    <div class="car">
         <v-flex d-flex child-flex>
        <v-card >
            <v-card-text>
                <div class="text-center font-weight-black title text--primary">
                    test
                </div>
                <div class="text-center">
                    data
                </div>
            </v-card-text>
        </v-card>
        </v-flex>
    </div>
  `
})

new Vue({
  el: '#app',
  data: () => ({
    lorem: `Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.`
  }),
  components: {"car":car}
})

<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="285e5d4d5c414e51681a0650" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-sm>
      <v-layout row wrap>

        <v-flex d-flex xs12 sm4 child-flex>
          <v-card color="orange lighten-2" tile flat>
            <v-card-text>Card 1</v-card-text>
          </v-card>
        </v-flex>
        
        <v-flex d-flex xs12 sm2>

          <v-layout column wrap>
            <car></car>
            <car></car>
            <car></car>
          </v-layout>
        </v-flex>

        <v-flex d-flex xs12 sm6>
          <v-card color="red lighten-2" dark tile flat>
            <v-card-text>{{ lorem }} {{ lorem }} {{ lorem }} {{ lorem }} {{lorem}}</v-card-text>
          </v-card>
        </v-flex>
   
         <v-flex d-flex xs12 sm4 child-flex>
          <v-card color="purple lighten-1" tile flat>
            <v-card-text>{{lorem}}</v-card-text>
          </v-card>
        </v-flex>
        <v-flex xs12 sm2 child-flex>
          <v-card color="green lighten-2" tile flat>
            <v-card-text>{{lorem}}</v-card-text>
          </v-card>
        </v-flex>
        
        <v-flex d-flex xs12 sm6 child-flex>
          <v-card color="blue lighten-2" tile flat>
            <v-card-text>{{lorem}} {{lorem}}</v-card-text>
          </v-card>
        </v-flex>
       
      </v-layout>
    </v-container>
  </v-app>
</div>

Answer 1

您可以将 grow 添加到汽车外部 div 并将 fill-height 添加到 v-flex...

<div class="car grow">
    <v-flex d-flex child-flex class="fill-height">
      <v-card>
        <v-card-text>
            <div class="text-center font-weight-black title text--primary">
                test
            </div>
            <div class="text-center">
                data
            </div>
        </v-card-text>
      </v-card>
    </v-flex>
</div>

https://codeply.com/p/qOKz9Qsv6L