如何使用CSS实现Div水平居中且仅在内容超出空间时启用滚动？

我明白你的需求：想要让这个包含筛选按钮的容器水平居中，只有当内容超出可用空间时才显示滚动条，同时还要避免边缘被截断——之前用margin:auto加max-width:30rem的方案没达到预期，问题出在容器宽度的控制逻辑上。

问题分析 #

原来的CSS把max-width直接加在带滚动的父容器上，当屏幕宽度小于30rem时，父容器被限制在30rem，超出屏幕的部分会被截断；而当屏幕宽度足够时，又没法让内部内容自适应宽度，导致空间浪费。我们需要把宽度控制和滚动逻辑分开处理。

解决方案 #

调整CSS结构，把水平居中、宽度限制和滚动功能拆分到不同容器层级：

.az-chips-btns-parent {
  display: flex;
  justify-content: center; /* 实现水平居中 */
  overflow: auto; /* 只有内容超出时显示滚动条 */
  width: 100%; /* 占满父级可用宽度 */
}

.az-chips-btns {
  display: flex;
  gap: 0.6rem; /* 可选：给按钮之间添加间距，优化视觉 */
  max-width: 30rem; /* 内容最大宽度限制为30rem */
  width: fit-content; /* 宽度随内容自适应，小于30rem时包裹内容，大于时撑到30rem */
}

为什么这样有效？ #

• 父容器.az-chips-btns-parent用Flex布局实现水平居中，同时占满整个可用宽度，确保滚动条能在屏幕范围内显示，不会截断边缘。
• 内部容器.az-chips-btns负责控制内容的最大宽度：当内容总宽度小于30rem时，它会自适应内容宽度，充分利用空间；当内容超出30rem时，它被限制在30rem，此时父容器的overflow:auto会触发横向滚动。
• 保留了所有原有HTML结构，不需要修改任何DOM元素。

额外优化（可选） #

如果希望按钮在空间不足时自动换行（而不是滚动），可以给.az-chips-btns添加flex-wrap: wrap，但根据你的需求，保持默认的flex-wrap: nowrap就能实现滚动效果。

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