超越材质扩展面板的内容答案

【问题标题】：Content going beyond material expansion panel超越材质扩展面板的内容
【发布时间】：2021-09-09 16:01:54
【问题描述】：

我正在使用材质扩展面板来保存一些内容，当扩展面板打开（展开）时，我试图在复选框中显示 2 列数据。它似乎工作正常，但是当我向两列添加一个 css 类以便它们并排放置时，扩展面板确实会调整到大小并且它们两列直接离开边缘。

<mat-accordion>
   <mat-expansion-panel>
      <mat-expansion-panel-header>
        Some header
      </mat-expansion-panel-header>

      <div class="col-1">
         <div *ngFor="let firstname of people.names">
            <mat-checkbox (change)="changeFunction(firstname)">
               {{ firstname }}
            </mat-checkbox>
         </div>
      </div>

      <div class="col-2">
         <div *ngFor="let school of people.schools">
            <mat-checkbox (change)="changeFunction(school)">
               {{ school }}
            </mat-checkbox>
         </div>
      </div>
   </mat-expansion-panel>
</mat-accordion>

.col-1 {
   width: 50%;
   float: left;
}

.col-2 {
   width: 50%;
   float: right;
}

如果我从 div 中删除类（col-1 和 col-2），则内容适合展开面板，因为面板会根据内容的长度进行调整。但是对于这些类，面板不会拉伸，并且内容会直接从面板中消失......这里的任何帮助将不胜感激。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

在这种情况下我会选择flex

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header> Some header </mat-expansion-panel-header>
    <div class="panel-container">
      <div>
        <div *ngFor="let firstname of people.names">
          <mat-checkbox (change)="changeFunction(firstname)">
            {{ firstname }}
          </mat-checkbox>
        </div>
      </div>

      <div>
        <div *ngFor="let school of people.schools">
          <mat-checkbox (change)="changeFunction(school)">
            {{ school }}
          </mat-checkbox>
        </div>
      </div>
    </div>
  </mat-expansion-panel>
</mat-accordion>

以及它的 css：

.panel-container {
  display: flex;
}

.panel-container * {
  flex-grow: 1;
}

【讨论】：