如何修复代码块水平滚动条异常显示问题？

我帮你排查了一下问题，核心原因在于两个细节：一是代码容器的固定宽度+内边距导致的隐性横向溢出，二是滚动条的触发规则设置不符合跨端一致的需求。

问题拆解 #

1. 滚动条触发规则差异：你给article.single pre设置了overflow-x: scroll，这个属性在Windows浏览器里不管内容是否超出，都会强制显示滚动条；而Mac浏览器默认会隐藏未激活的滚动条，所以出现了两端表现不一致的情况。
2. 容器宽度计算溢出：article.single figure, article.single div.highlight用了固定的46rem宽度，再加上左右各1em的内边距，配合margin-left: -1rem的偏移，在Windows浏览器的盒模型计算中，容器实际占据的横向空间会超出预期，即使代码内容没溢出，也会触发空滚动条。

修复方案 #

修改以下两处CSS规则就能解决问题：

1. 调整滚动条触发逻辑

把pre的overflow-x: scroll改成overflow-x: auto，这样只有当内容真正超出容器时才会显示滚动条：

article.single pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow-x: auto; /* 替换原有的scroll */
  border-radius: 3px;
  padding: 2rem;
}

2. 优化代码容器的宽度适配

把固定宽度改成基于父元素的动态计算，避免固定值带来的溢出问题，同时补充右边的负margin来平衡左边的偏移：

article.single figure, article.single div.highlight {
  box-sizing: border-box;
  max-width: calc(100% + 2rem); /* 替换原有的46rem */
  width: calc(100% + 2rem); /* 替换原有的46rem */
  margin-left: -1rem;
  margin-right: -1rem; /* 新增，平衡左侧负margin */
  margin-bottom: 1rem;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 1em;
  padding-bottom: 0.1em;
}

完整修改后的相关CSS片段 #

/* Article Elements */
article.single * { max-width: 100%; }
article.single pre { margin-top: 0; margin-bottom: 1rem; overflow-x: auto; border-radius: 3px; padding: 2rem; }
article.single ul code, ol code, p code { padding: 0em 0.1em; border-radius: 3px; }
article.single figure, article.single div.highlight { box-sizing: border-box; max-width: calc(100% + 2rem); width: calc(100% + 2rem); margin-left: -1rem; margin-right: -1rem; margin-bottom: 1rem; padding-left: 1em; padding-right: 1em; padding-top: 1em; padding-bottom: 0.1em; }
@media (max-width: 52em) { article.single figure, article.single div.highlight { width: 100%; margin-left: 0; margin-right: 0; border-radius: 3px; } }

修改后，代码块的滚动条就会和Mac端表现一致——只有在内容超出容器时才显示，不会再出现空滚动条了。

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