ionic-framework - 如何让离子卡取剩余高度？

Question

我想通过一些 CSS 操作，是否有可能使最后一个的高度ion-card等于以下 Vue2 模板中 ion-content 的剩余高度？

<template>
  <ion-app>
    <ion-page>
      <ion-content>
        <ion-card>
          <ion-item button>
            <ion-thumbnail slot="start">
              <img src="~assets/svg/QR-code.svg" />
            </ion-thumbnail>
            <ion-label> Generate a new QR Code. </ion-label>
          </ion-item>
        </ion-card>

        <ion-card>
          <ion-card-header>
            <ion-card-title>Header Test</ion-card-title>
          </ion-card-header>

          <ion-card-content>Balance €&lt;/ion-card-content>
        </ion-card>

         <ion-card class="last-orders-card">
          <ion-card-header>
            <ion-card-title>Header 1</ion-card-title>
          </ion-card-header>

          <ion-list class="last-orders-list">
            <ion-item v-for="item in items" :key="item.id">
              <ion-label>
                <ion-text color="primary">
                  <h3>Test</h3>
                </ion-text>
              </ion-label>
            </ion-item>
          </ion-list>
        </ion-card>
      </ion-content>
    </ion-page>
  </ion-app>
</template>

我添加了以下 css 类以使卡片内的内容（在本例中为ion-list）可滚动。

.last-orders-card {
  max-height: 100%;
  display: flex;
  flex-flow: column;
}
.last-orders-list {
  overflow: scroll;
}

我想知道是否可以在不更改max-height. 例如，我可以将其设置为 50%，但这取决于屏幕尺寸，特别是如果顶部有更多卡片（就是这种情况，但为简洁起见，我已将它们从片段中省略）。

标签： ionic-framework