我的mat-select选项会自动放置在页面底部。这意味着下拉菜单和页面底部之间的任何元素都将插入下拉菜单和其可用选项之间。x1c 0d1x
它应该在红色文本的上面，而不是下面。我以前在堆栈溢出上看到过这个问题，最流行的解决方法是添加主题。但是，添加主题并没有解决我的问题。
代码：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

.flex {
  display: flex;
  margin-top: 5px;
}

.select {
  margin-left: 3px;
  width: 20%;
  border: solid 1pt lightgray;
  padding: 5px;
  position: inherit
}

.option {
  margin-left: 3px;
  background-color: lightgray;

}

.opton:hover {
  background-color: blue;
}

<div class="bold">WIP</div>
<div class="flex">
  <button mat-stroked-button (click)="onStop($event)" class="normal-button">Stop All</button>
  <button mat-stroked-button (click)="onRestart($event)" class="normal-button">Restart All</button>
  <button mat-stroked-button (click)="onShutdown($event)" class="normal-button">Shutdown</button>
</div>
<div class="flex">
  <mat-select appearance="fill" [disableOptionCentering]="true" class="select" (selectionChange)="onChangeService($event)" placeholder="Select Service">
    <div *ngFor="let service of serviceNames">
      <mat-option value="{{service}}" class="option">{{service}}</mat-option>
    </div>
  </mat-select>
  <button mat-stroked-button (click)="onStopService($event)" class="normal-button">Stop</button>
  <button mat-stroked-button (click)="onRestartService($event)" class="normal-button">Restart</button>
  <div class="error">
    {{error}}
  </div>
</div>

我该怎么办？任何帮助都很感激。