Angular中如何让最后一个mat-card垂直拉伸填充剩余空间？

开发Angular项目时，需要让包含“+ Manually enter”按钮的最后一个mat-card垂直拉伸，填充容器的剩余垂直空间。

HTML代码片段 #

<div class="regulated-details">
  <div *ngFor="let product of links">
    <mat-card
      class="mat-card-element padding-4x mat-elevation-z0"
      fxLayout="row"
      fxLayoutAlign="space-between none"
    >
      <div fxLayout="column">
        <div class="text-caption margin-bottom-1x">
          <span class="text-color-neutral-600 margin-bottom-1x"></span>
          <span class="text-bold-body">
            {{ product }}
          </span>
        </div>
      </div>
      <button
        id="details-vertical-button-{{ i }}"
        mat-icon-button
      ></button>
    </mat-card>
  </div>
  <mat-card>
    <button
      mat-flat-button
      class="icon-button"
      color="primary"
    >
      <mat-icon svgIcon="add"></mat-icon>
      + Manually enter
    </button>
  </mat-card>
</div>

CSS代码片段 #

:host,
.mat-card-element {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}
.add-unique-packages {
  overflow-y: hidden;
  overflow-x: hidden;
}
.deleteIcon {
  display: flex;
  flex-direction: column;
}
.full-height-card {
  height: 100%;
}

效果说明 #

• 当前效果：最后一个mat-card仅适配按钮高度，容器底部留有空白区域。
• 期望效果：最后一个mat-card垂直拉伸至容器底部，填满剩余空间。

步骤1：配置父容器的Flex布局 #

给.regulated-details添加Flex布局，确保它能分配垂直空间：

.regulated-details {
  display: flex;
  flex-direction: column;
  height: 100%; /* 需确保该容器的父元素也设置了有效高度，比如100%或固定值 */
  gap: 0.5rem; /* 可选，给卡片之间添加间距，保持视觉一致性 */
}

步骤2：让最后一个卡片拉伸 #

给最后一个mat-card添加自定义类，并设置flex-grow: 1，同时保持内边距和其他卡片一致：

.flex-grow-card {
  flex-grow: 1;
  display: flex;
  align-items: flex-start; /* 按钮保持在卡片顶部，若需居中可改为center */
  padding: 1rem; /* 匹配其他卡片的padding-4x值，根据实际调整 */
}

步骤3：修改HTML结构 #

给最后一个mat-card加上自定义类，并保持和其他卡片一致的阴影样式：

<mat-card class="flex-grow-card mat-elevation-z0">
  <button
    mat-flat-button
    class="icon-button"
    color="primary"
  >
    <mat-icon svgIcon="add"></mat-icon>
    + Manually enter
  </button>
</mat-card>

关键注意点 #

• 必须确保.regulated-details的父容器有明确的高度（比如height: 100%），否则Flex布局无法计算剩余空间。
• 如果使用Angular Flex-Layout，也可以直接给父容器添加fxLayout="column"，给最后一个卡片添加fxFlex="1 1 auto"，效果和CSS设置一致。

内容的提问来源于stack exchange，提问作者Visi