CSS Grid引发代码块水平滚动的原因及解决方案

为什么CSS Grid会引发这个问题？ #

当body设置为display: grid时，Grid容器的默认行为是不会自动限制子元素的最小宽度。你的代码块（pre/code）包含不可换行的长文本，窗口缩小时，Grid容器不会强制.contentContainer收缩到容纳不下长内容的尺寸，反而会让容器跟着长内容的宽度走，导致水平滚动，破坏原本的响应式布局。

本质原因：Grid容器的min-width默认值为auto，会被子元素的内容撑开，而非像常规块级元素那样自动收缩适配容器。

修复方案 #

以下两种方案均可保留Grid布局，同时解决代码块溢出问题：

方案1：给Grid容器（body）添加min-width: 0 #

这是最直接的解决方式，强制Grid容器允许子元素收缩至小于内容宽度：

body {
  background-color: red;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  gap: 30px 0px;
  min-width: 0; /* 新增该行 */
}

方案2：给.contentContainer设置水平溢出并调整Grid行高计算 #

若之前用overflow: auto导致页脚错位，是因为Grid的1fr行在容器有溢出时高度计算错误。可单独设置水平溢出，同时修正Grid的行高规则：

.contentContainer {
  max-width: 800px;
  width: 95%;
  background-color: white;
  margin: 20px auto;
  padding: 25px 35px;
  overflow-x: auto; /* 仅允许水平滚动 */
}

/* 修正Grid行高计算，避免页脚错位 */
body {
  background-color: red;
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto; /* 将1fr替换为minmax(0,1fr) */
  align-items: start;
  gap: 30px 0px;
}

额外优化：限制代码块宽度 #

给pre添加max-width: 100%，确保它不会超出父容器范围：

pre {
  overflow: auto;
  padding-top: 30px;
  line-height: 170%;
  border-radius: 6px;
  max-width: 100%; /* 新增该行 */
}

效果说明 #

以上方案均能保留你需要的Grid布局（头部、内容区、页脚的三行结构），同时让.contentContainer在窗口缩小时保持响应式，代码块内部出现滚动条而非撑开整个容器。

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