已解决：Bootstrap手风琴设置overflow-x:scroll后X轴滚动条不显示问题

AI 小北

2026-9-27

解决方案

你遇到的滚动条不显示问题主要是flex布局默认规则、浏览器滚动条默认隐藏策略两个核心原因导致，按以下步骤修改即可：

修正flex布局规则，避免子元素被压缩
display: flex容器下的子元素默认开启收缩，会自动压缩到适配容器宽度，不会触发横向溢出，修改CSS如下：

.accordion-body {
  background-color: var(--primary-bg);
  width: 950px;
  margin: 0 auto;
  border: 2px solid var(--primary);
  overflow-x: auto;
  overflow-y: hidden; /* 禁用纵向滚动，避免纵向滚动条占用空间 */
  display: flex;
  flex-wrap: nowrap; /* 强制子元素不换行 */
}
/* 禁止所有直接子元素自动收缩 */
.accordion-body > * {
  flex-shrink: 0;
  margin-right: 16px; /* 可按需调整子元素间距 */
}

强制显示滚动条，适配不同浏览器
默认情况下macOS、部分移动端浏览器会自动隐藏滚动条，仅滚动时触发显示，添加以下自定义滚动条样式强制显示：

/* Webkit内核浏览器（Chrome、Safari、Edge等） */
.accordion-body::-webkit-scrollbar {
  height: 8px; /* 横向滚动条高度 */
  display: block;
}
.accordion-body::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}
.accordion-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
.accordion-body::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* Firefox浏览器适配 */
.accordion-body {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f0f0f0;
}