下拉框导致出现滚动条怎么解决

<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的滚动条。应该怎么解决呢

overflow:auto?这里，应该是

问题解决了吗，我也出现了这个问题