AntD多选Select组件选中项溢出，添加滚动条无效求助

我用AntD的多选Select组件时，选多个选项后标签会超出组件边界，一开始给.ant-select-selector加了max-height和overflow-y样式，但完全没效果，折腾了下找到了解决办法：

核心问题：选对CSS目标容器 #

AntD的多选标签不是直接在.ant-select-selector内滚动，真正承载标签的是其内部的.ant-select-selection-overflow容器，所以需要同时配置外层和内层容器的样式：

.custom-multiselect .ant-select-selector {
  max-height: 60px;
  overflow: hidden; /* 隐藏外层溢出，让内层容器负责滚动逻辑 */
}

.custom-multiselect .ant-select-selection-overflow {
  max-height: 60px;
  overflow-y: auto;
  padding-right: 8px; /* 预留滚动条空间，避免标签被遮挡 */
}

AntD v5版本适配（可选） #

如果使用AntD v5，可通过更精确的选择器确保样式优先级：

.custom-multiselect.ant-select-multiple .ant-select-selector {
  max-height: 60px;
  overflow: hidden;
}

.custom-multiselect.ant-select-multiple .ant-select-selection-overflow {
  max-height: 60px;
  overflow-y: auto;
  padding-right: 8px;
}

额外检查点 #

• 不要给.ant-select-selector设置固定height，必须用max-height，确保内容较少时不会空出多余高度。
• 排查自定义样式（比如.select-input或width-220px）是否存在高度相关的冲突属性。

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