如何使用v-flex自动，固定尺寸的卡和卡安排？

Question

我想让我的卡适应所有屏幕尺寸，而卡的排列方式将取决于屏幕尺寸。我遇到的问题是，从<v-flex xs6 md2>更改为<v-flex auto>之后，卡的排列方式有所不同。

我尝试使用缩小，但是问题仍然相同。我将卡的高度更改为100％高度，问题仍然相同。

 <v-layout row wrap>

        <v-flex auto class="px-2" v-for="n in 11"
              :key="n">
           <v-card>
            <v-img
          height="100%"
          width="100%"
          src="https://cdn.shopify.com/s/files/1/1592/5969/products/mc18_149_m10-trinity_knot_ring_a.jpg?v=1539363759"
        ></v-img>
            <v-card-title > <h4 class="text-md-center">Barang Kemas Termurah</h4></v-card-title>
            <v-card-text >
            <table style="width:100%">



              <tr class="font-weight-small">
                <td>Item Code</td>
                <td >SKT1123</td>
              </tr>
               <tr class="font-weight-small">
                <td>Approx. Weight</td>
                <td>2.37 g</td>
              </tr>
              <tr>
              <td colspan="2"><v-divider></v-divider></td><br>
            </tr>
               <tr class="font-weight-medium">
                <td>Price Range</td>
                <td>RM300-2300</td>
              </tr>

              <tr class="green--text font-weight-medium">
                <td >Stock Available</td>
                <td>30</td>

              </tr>
            </table>
            </v-card-text>

              <v-card-actions>
           <v-btn block color="secondary" dark>ORDER</v-btn>
          <v-spacer></v-spacer>
                  <v-btn icon>
                    <v-icon>favorite</v-icon>
                  </v-btn>
        </v-card-actions>




          </v-card>
        </v-flex>

      </v-layout>

https://codesandbox.io/s/81w97ly2ml?fontsize=14 <-这是来自codeandbox的代码示例。

我希望所有卡（例如eCommerce产品卡）的卡都以相同的尺寸显示，以响应屏幕尺寸更改。这意味着当屏幕尺寸更改时，卡的尺寸保持固定。