增加 mat-select 的大小但不改变 mat-form-field？答案

【问题标题】：Increase size of mat-select but not change mat-form-field?增加 mat-select 的大小但不改变 mat-form-field？
【发布时间】：2021-06-08 23:26:15
【问题描述】：

我正在尝试在不更改 mat-form-field 大小的情况下增加 mat-select 选项的大小。目前看起来是这样的：

但是当我尝试更改 mat-select 的大小时，它会将箭头推过并进入下一个字段：

代码：

<mat-form-field>
                    <mat-label>Account Name</mat-label>
                    <mat-select
                        id="account_list"
                        ngDefaultControl
                        formControlName="account"
                        class="menu-size"
                    >
                        <mat-option
                            *ngFor="let acc of accounts; let i = index"
                            [value]="acc.name"
                            id="account_option_{{ i }}"
                        >
                            {{ acc.name }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>

CSS：

 .menu-size {
            width: 350px;
        }

有没有办法在不影响 mat 表单域的情况下增加 mat 选项菜单的大小？

【问题讨论】：

请创建一个输出（现场示例）供人们调试。

标签： css angular typescript angular-material

【解决方案1】：

您可以使用CSS Flex Box 完成您的目标。阅读整篇文章可能会让人不知所措，所以我通常使用online tool 来帮助我，这样我就可以快速了解我所追求的内容并获取所需的 css 样式。

在将amount 输入调整为 100 像素后，使用下面的代码可以使选择菜单占据剩余的空白空间：

<div class="flex-container" style="display: flex;">

  <mat-form-field class="flex-fill-empty-space" style="flex: 1 1 auto">
    <mat-label>Account Name</mat-label>
    <mat-select>
      <mat-option *ngFor="let acc of [{ name: 'a' }, { name: 'b' }]">{{ acc.name }}</mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field class="flex-stay-original-size" style="flex: 0 1 auto; width: 100px; margin-left: 1em;">
    <mat-label>Amount</mat-label>
    <input matInput>
  </mat-form-field>

</div>

示例输出：

【讨论】：