如何将Vaadin 23水平Tabs组件配置为多行模式替代滚动？

Vaadin 23的水平Tabs组件默认在空间不足时会启用横向滚动，但确实可以通过自定义CSS强制改成多行换行模式，解决移动端滚动异常的问题。

具体实现步骤如下：

• 在项目全局样式文件（比如styles.css）中添加以下自定义CSS：

/* 移除水平Tabs的横向滚动限制 */
vaadin-tabs[orientation="horizontal"] {
  overflow-x: visible;
}

/* 让Tabs的滚动容器支持换行 */
vaadin-tabs[orientation="horizontal"] .tabs-scroller {
  overflow: visible;
  flex-wrap: wrap;
}

/* 可选：调整Tab的最小宽度，避免内容被过度挤压 */
vaadin-tabs[orientation="horizontal"] ::slotted(vaadin-tab) {
  flex-shrink: 0;
  min-width: 120px; /* 可根据需求调整这个值 */
}

• 样式生效后，当水平空间不足时，Tabs会自动换行显示所有Tab项，不再触发横向滚动。

注意事项：

• 如果Tab有自定义宽度设置，需要调整min-width值适配布局，确保每个Tab的内容正常显示。
• 测试不同移动端设备的显示效果，不同屏幕尺寸下换行表现可能有差异。
• 若之前给Tabs添加过滚动相关自定义样式，需移除冲突部分，避免影响多行布局。

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