如何避免选择下拉菜单在较小的设备上显示出来

Question

我正在努力避免在较小的设备上出现以下情况。
下拉框不应超出屏幕。

这是我的html代码：

<div class="form-group row">
      <label for="category" class="col-sm-2 col-form-label">Category</label>
      <div class="col-xs-6 col-sm-6 col-md-6"> 
        <select col-sm-4style="width:100%" class="custom-select form-control" name="category" #cat (ngModelChange)='updateCategoryId(cat)' [(ngModel)]="form.category"
          #category="ngModel">
          <option class="col-sm-4" *ngFor="let type of categoryNames;let itemIndex = index" [selected]="itemIndex == 0" [value]="type.name"
            [id]="type.id">{{type.name}}</option>
        </select>
      </div>
    </div>

结果看起来像：

我正在寻找一种基于CSS的方法来避免这种情况。