Vue.js 类星体，iframe布局符合预期，带QTable

我遵循Quasar QTable中的示例，将iframe（嵌入youtube）替换为每张卡的文本内容。如果是文本，它将很好地遵循布局网格。第三张牌之后，第四张牌将转到下一排。但如果它是iframe，那么它将不会转到下一行，并继续运行

<q-table
  grid
  :card-container-class="cardContainerClass"
  :data="data"
  :columns="columns"
  row-key="name"
  :filter="filter"
  hide-header
  :rows-per-page-options="rowsPerPageOptions"
>

  <template v-slot:item="props">
    <div class="q-pa-xs col-xs-12 col-sm-6 col-md-6">
      <q-card>
        <q-card-section class="text-center">
          <div class="q-pa-md row">
            <div class="col-12">
              <!-- Won't work -->
              <iframe style="width:200px; height:300px;" ></iframe>
              <!-- Remove iframe, and replace with normal text or other HMTL element will work -->
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </template>
</q-table>

（请参阅“使用伪选择器打断行/列的砌体”）

---

有人有什么线索吗？

所以，下面是发生的事情。。。这与iframe无关。它是关于表格和表格单元格本身的。桌子的高度必须足够高，以容纳最高的柱子，从而不会弄乱队形，并使细胞水平溢出。要解决此问题，请1）动态计算表格高度，或2）使其足够高以容纳最高的列。（例如3vh或4vh）。