介质尺寸更改后，Mat-card 不会增长

Question

我正在构建一个带有 Flex 布局的小型 angular 应用程序，但我遇到了困难。

在大屏幕上一切正常，但在小设备上我希望每个属性占据一行。所以我为每一行设置属性 fxFlex.lt-sm=100 。请找到下面的屏幕截图和我的代码。也许你们中的一个可以给我提示我哪里出错了？

![1]https://i.imgur.com/bd66eev.png "ok"
![2]https://i.imgur.com/as3HzuJ.png"wrong"

我为每一行设置了属性 fxFlex.lt-sm=100。请找到下面的屏幕截图和我的代码。也许你们中的一个可以给我提示我哪里出错了？

<mat-card>
  <mat-list role="list">
    <mat-list-item
      role="listitem"
      *ngFor="let user of (usersState | async).users"
      class="users-list">
      <div
        fxFill
        fxLayout="row wrap"
        fxLayoutGap="5px">
        <div
          fxFlex="30"
          fxFlex.lt-sm="100">
          <p>{{ user.email }}</p>
        </div>
        <div
          fxFlex="20"
          fxFlex.lt-sm="100">
          <p>{{ user.username }}</p>
        </div>
        <div
          fxFlex="20"
          fxFlex.lt-sm="100">
          <p>{{ user.active ? 'Account active' : 'Account inactive'}}</p>
        </div>
        <div
          fxFlex.lt-sm="100">
          <p>actions</p>
        </div>
        <mat-divider></mat-divider>
      </div>
    </mat-list-item>
  </mat-list>
</mat-card>

此外，mat-card 不会根据内容的实际大小进行调整。

Answer 1

您的代码按预期工作。但是，mat-list-item 的 height 固定为 48px。这就是为什么在小屏幕上 mat-list-item 高度不会像您预期的那样增长。此外，mat-card 也不会根据内容的实际大小进行调整。

按如下方式在 mat-list-item 上覆盖 height 应该可以解决这两个问题。

.users-list {
    height: auto !important;
}

这是一个工作演示：https://stackblitz.com/edit/angular-rgepcp

介质尺寸更改后，Mat-card 不会增长

Mat-card doesn't grow after media size change

angular-flex-layout

angular