<div style="overflow: auto;max-height: 420px">
<table class="table table-striped table-bordered">
<tr>
<th>序号</th>
<th>产品名称</th>
<th>规格</th>
<th>保质期</th>
<th style="width:200px">计量单位 <button ng-disabled="disabled" permission="DICT_CREATE" class="btn btn-default addDictBtn" ng-click="addUnit()"><span class="glyphicon glyphicon-plus"></span>新计量单位</button></th>
</tr>
<tr ng-repeat="data in vm.form.products">
<td ng-bind="$index+1" style="vertical-align: middle"></td>
<td><input ng-model="data.name" class="form-control" type="text" placeholder="请输入产品名称"></td>
<td><input ng-model="data.format" class="form-control" type="text" placeholder="请输入规格"></td>
<td>
<div class="input-group" style="width:190px">
<input ng-model="data.life" class="form-control" type="number" min="1" placeholder="请输入保质期"><span class="input-group-addon">天</span>
</div>
</td>
<td>
<ui-select ng-model="data.unit_id" theme="bootstrap" id="unit" name="unit" required ng-disabled="disabled">
<ui-select-match placeholder="请选择计量单位">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="item.id as item in units | filter: $select.search | limitTo:100 track by item.id">
<span ng-bind="item.name"></span>
</ui-select-choices>
</ui-select>
</td>
</tr>
</table>
</div>
我的div设置的最大高度是420px,下拉菜单使用的ui-select,下拉菜单的数据内容高度是200px左右。为什么会导致触发外层div的滚动条。应该怎么解决呢