flexbox - Angular Material 自动完成，旁边有刷新按钮

Question

我有以下角度 html 组件：

<div fxLayout fxLayout.xs="row" fxLayoutAlign="left" fxLayoutGap="5px" fxLayoutGap.xs="0">

  <div flex class="item item-1" fxFlex="95%">
    <mat-form-field class="large-field">
      <input matInput placeholder="Full Name" aria-label="Full Name" [matAutocomplete]="auto" [formControl]="FullNameCtrl">
      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelected($event.option.value)">
        <mat-option *ngFor="let data of filteredCompanyFullName | async" [value]="data">
          <span>{{ data.FullName }}</span>
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>
  </div>
  <div flex class="item item-2" fxFlex="4%">
    <button matTooltip="Refresh" mat-icon-button (click)="refresh()">
      <mat-icon>refresh</mat-icon>
    </button>
  </div>
</div>

上面所做的是显示一个自动完成下拉菜单和一个刷新按钮。我正在努力在 html 上方设置样式以显示如下图所示的内容：

但是，它看起来像以下不是所需的输出：

我应该改变什么来获得第一张图片？我希望输入字段占据行的 95% 宽度，并且它旁边的一个小刷新按钮向右对齐。