如何进行材质选择而不溢出容器

Question

我开发了一个包含多个字段的

form

：

input

或

select

。 问题是这个

container

的

form

具有明确定义的高度，当我单击

select

时，它会溢出。 我希望

select

占据它想要的所有空间，但不会相对于表单的

container

溢出！

我已经看到，当您单击

select

并打开

options

时，它会创建一个

overlay material

。 这个覆盖层不属于选择，所以我不能告诉它具有 100% 的高度，因为它占据了整个页面的 100%。

模板

<div class="container">
    <mat-form-field>
      <mat-label>Favorite food</mat-label>
      <mat-select>
        <mat-option *ngFor="let food of foods" [value]="food.value">
          {{food.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>

风格

.container {
   height:100px;
   overflow: hidden;
}

有人遇到过这种情况吗？谢谢

Answer 1

您可以尝试

mat-select

的原生HTML选择模式，它没有覆盖。

<div class="container">
  <mat-form-field>
    <mat-label>Choose an option</mat-label>
    <select matNativeControl>
      <option value="" selected></option>
      <option value="volvo">Volvo</option>
      <option value="saab" disabled>Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
  </mat-form-field>
</div>

Stackblitz 演示