CSS Grid布局移动端pre格式化内容过宽问题解决咨询

核心原因 #

Grid布局中，作为grid item的元素（你的header、div、footer）默认带有min-width: auto特性，会被内部长内容（比如设置了white-space: pre的代码块）强行撑开宽度，打破移动端的自适应限制，导致页面横向溢出。

具体解决方案 #

1. 重置Grid Item的最小宽度

给body的所有直接子元素添加min-width: 0，让它们不再被内容强行撑开，而是遵循容器的宽度约束：

/* 精准指定子元素 */
body > header,
body > div,
body > footer {
  min-width: 0;
}

/* 或者更简洁的批量写法 */
body > * {
  min-width: 0;
}

2. 给代码块所在容器添加横向滚动

给包含代码块的内容容器（比如页面中间的div内容区）设置overflow-x: auto，让长代码可以横向滚动而不撑破页面：

/* 假设内容区div的类名为content */
.content {
  overflow-x: auto;
  width: 100%; /* 确保容器占满可用宽度 */
}

如果想更精准控制代码块，也可以给代码块单独套一层容器：

<!-- 调整后的HTML结构 -->
<div class="content">
  <div class="code-wrap">
    <p class="code">这里是很长的代码内容...</p>
  </div>
</div>

对应的CSS：

.code-wrap {
  overflow-x: auto;
  width: 100%;
}

3. 保留非移动端的固定宽度设置

在媒体查询中确认固定宽度的设置，同时保留min-width: 0防止极端情况：

@media (min-width: 751px) {
  body > * {
    width: 60em;
    margin: 0 auto; /* 让内容居中显示 */
    min-width: 0;
  }
}

效果验证 #

完成以上设置后，移动端页面会保持自适应宽度，长代码块会出现横向滚动条，和你之前非Grid布局的表现一致；非移动端则维持60em的固定宽度，代码块同样可以正常横向滚动。

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