如何配置Vaadin Multi-Select Combo Box自动扩展显示所有选中项？

默认情况下Multi-Select Combo Box会隐藏超出可见区域的选中项，你可以通过自定义样式实现自动扩展显示所有选中项，具体操作如下：

1. 编写正确的穿透样式 #

Vaadin组件的内部结构基于Shadow DOM，普通CSS选择器无法直接修改内部元素样式，需要使用::part()选择器来穿透。在你的样式文件中添加以下规则：

/* 让组件本身高度自适应 */
vaadin-multi-select-combo-box {
  height: auto !important;
}

/* 调整输入区域高度，保留未选中时的最小高度 */
vaadin-multi-select-combo-box::part(input-field) {
  height: auto !important;
  min-height: var(--lumo-size-m);
}

/* 让选中项容器不隐藏溢出内容，高度自适应 */
vaadin-multi-select-combo-box::part(chip-group) {
  overflow: visible !important;
  height: auto !important;
}

2. 排查之前导入样式无效的原因 #

你之前仅导入了空的CSS文件但未添加实际样式规则，这是没有变化的核心原因。另外要确保：

• 样式文件放置在Vaadin主题的正确目录（如frontend/themes/你的主题名/components/）
• 如果是通过组件注解导入样式，需使用@CssImport(value = "./components/vaadin-multi-select-combo-box.css", themeFor = "vaadin-multi-select-combo-box")这种方式，而非普通的@import

3. 验证效果 #

添加样式后刷新页面，选中多个项时，组件会自动扩展高度以显示所有选中内容，无需滚动或隐藏。

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