如何为PrimeNG AutoComplete组件添加超宽时的横向滚动？

你遇到的问题根源在于只给下拉面板（.p-autocomplete-panel）设置了样式，但PrimeNG的AutoComplete下拉列表内部还有一个承载选项的容器（.p-autocomplete-items），默认会自动换行，导致横向滚动无法触发。可以通过以下CSS代码解决：

.p-autocomplete-panel {
  max-width: 15vw;
  overflow-x: auto; /* 开启横向滚动 */
  overflow-y: auto; /* 保留垂直滚动功能 */
}

.p-autocomplete-items {
  white-space: nowrap; /* 强制选项内容不换行，超出宽度后触发横向滚动 */
}

关键说明： #

• 明确设置overflow-x: auto，确保面板在内容超出宽度时显示横向滚动条；
• 给内部的.p-autocomplete-items容器添加white-space: nowrap，让选项内容保持一行显示，不会自动折行，这样才会触发横向滚动；
• overflow-y: auto可以保留垂直方向的滚动功能，当选项数量过多时依然能正常滚动。

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