mat-select dropdown overflows parent div on select angular-material

Question

Am using angular-material mat-select inside a fixed width div. On select, the dropdown appears to overflow the div. Please help in fixing this.

<div class="col-6">
  <mat-form-field>
    <mat-select #chooseGroupSelect [formControl]="choosenGroupControl" (selectionChange)="onChange($event.value)">
      <mat-option *ngFor="let group of groups" [value]="group.gid">
        <span i18n>{{group.name}}</span>
      </mat-option>
      <mat-option [value]="'newGroup'">
        <small i18n>
          <i class="fa fa-plus"></i>&nbsp;
          New Group
        </small>
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>