如何让Ionic Vue2项目中最后一个ion-card占满ion-content剩余高度

核心通过flex弹性布局自动分配剩余高度，无需设置固定百分比，完全适配上方卡片高度变化，且不需要修改你原有保留的max-height属性，具体实现代码如下：

第一步：调整ion-content滚动容器布局 #

首先将ion-content的内部滚动容器设置为纵向flex布局，占满整个ion-content的可用高度：

/* Ionic v6+ 适用的选择器 */
ion-content::part(scroll) {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* 保留原有内边距，可根据设计调整 */
  padding: 16px;
  /* 卡片间距统一在这里设置，避免默认margin导致高度计算偏差 */
  gap: 16px;
}

/* 如果是Ionic v5及更早版本，替换为下面的选择器 */
/*
ion-content .inner-scroll {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  gap: 16px;
}
*/

第二步：调整最后一个卡片的样式 #

在你原有.last-orders-card样式基础上新增两个属性即可：

.last-orders-card {
  max-height: 100%; /* 完全保留你原有的配置不修改 */
  display: flex;
  flex-flow: column;
  /* 新增属性 */
  flex-grow: 1; /* 自动占满父容器所有剩余高度 */
  min-height: 0; /* 解决flex子项内容溢出时无法触发内部滚动的兼容问题 */
}

第三步：优化内部列表滚动样式 #

调整列表属性让它占满卡片剩余空间，滚动更友好：

.last-orders-list {
  /* 你原有配置可以保留，也可以改成auto避免无溢出时显示滚动条 */
  overflow: auto;
  /* 新增属性，占满卡片除header外的所有高度 */
  flex: 1;
}

该方案适配所有屏幕尺寸，上方卡片数量增减、高度变化时都可以自动适配剩余空间，内部列表滚动功能完全正常。

内容的提问来源于stack exchange，提问作者browser-bug