如何在Angular的mat-expansion-panel中使用flex布局适配移动屏幕尺寸

1. 修复flex父容器的宽度约束 #

当前循环容器.container仅设置了display: flex，未限制最大宽度，会被内部内容撑开超出屏幕宽度，添加对应样式：

.container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

2. 给mat-expansion-panel添加flex自适应属性 #

父级为flex容器时，子元素默认不会自动填充宽度，给面板类.container2添加如下样式：

.container2 {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

如果使用Angular Flex Layout也可以直接在标签上加属性：

<mat-expansion-panel hideToggle class="container2" fxFlex="1 1 auto">

3. 处理面板头部内容溢出 #

mat-panel-title默认未做溢出适配，文字过长会撑宽面板，可按需添加样式：

mat-panel-title {
  flex: 1 1 auto;
  /* 允许文字换行适配小屏用下面的配置 */
  white-space: normal;
  /* 如果需要单行省略就替换为以下配置
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  */
}

4. 外层卡片兜底适配 #

给外层.card-custom添加样式避免卡片本身超出视口宽度：

.card-custom {
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}

修改后的模板参考：

<ngc-card class="card-custom" fxLayout.xs="column" > 
  <div *ngFor="let inscricao of inscricoes; let p=index" class="container" style="display: flex; width: 100%; max-width: 100%;">
    <mat-expansion-panel hideToggle class="container2" style="flex: 1 1 auto; width: 100%;"> 
      <mat-expansion-panel-header>
        <button (click)="expandedElement = expandedElement === element ? null : element">
          <mat-icon>
            {{ expandedElement !== element ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}
          </mat-icon>
        </button>
        <mat-panel-title style="font-size:15px; white-space: normal;">
...

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