我之前也碰到过类似的ui-select下拉展开异常的问题，给你几个亲测有效的排查和解决方向：

• 强制固定下拉展开方向
  ui-select其实自带了控制下拉方向的属性，不用硬改CSS。你可以直接给ui-select标签加上dropdown-position="down"，强制它始终向下展开，这样不管窗口宽度变化还是打开开发者工具，都不会自动往上跳转了。示例代码：

  <ui-select dropdown-position="down" ng-model="yourSelectedModel">
    <!-- 你的ui-select选项内容 -->
  </ui-select>
  

• 精准控制下拉容器的滚动与高度
  之前设置max-height无效大概率是没定位到正确的元素。ui-select的下拉选项容器类是.ui-select-choices，你可以给这个类设置固定的max-height，配合overflow-y: auto，让下拉内容在容器内部滚动，不会触发整个页面的滚动条：

  .ui-select-choices {
    max-height: 300px !important; /* 用!important覆盖默认样式，或者用更具体的选择器提升优先级 */
    overflow-y: auto;
    overflow-x: hidden;
  }
  

  这里用max-height而不是固定height，是为了保证内容少的时候下拉框不会有多余空白；如果默认样式优先级太高，就用更具体的选择器比如body .ui-select-container .ui-select-choices来替代!important。

• 临时禁用页面滚动避免抖动
  如果还是会出现短暂的页面滚动条抖动，可以通过ui-select的内置事件，在下拉展开时临时给body禁用垂直滚动，收起后恢复：

  // 在你的AngularJS控制器中添加
  $scope.$on('ui-select-open', function() {
    document.body.style.overflowY = 'hidden';
  });
  
  $scope.$on('ui-select-close', function() {
    document.body.style.overflowY = '';
  });
  

  这个方法能直接避免页面滚动条的瞬间出现，不过要注意如果页面本身有滚动，收起下拉后一定要恢复原状态。

• 检查并升级ui-select版本
  有时候这类布局bug是旧版本ui-select的已知问题，如果你用的版本比较老，尝试升级到最新的稳定版，说不定官方已经修复了下拉方向判断的逻辑漏洞。

内容的提问来源于stack exchange，提问作者dras