为何pre标签设置max-width后页面仍出现横向滚动条？

问题原因 #

当前Grid布局里，中间列使用auto作为宽度规则，当pre标签内存在长内容时，auto会自适应内容的最大宽度，加上左右固定的19em列宽，整个容器宽度会超出视口，触发页面横向滚动。虽然给pre设置了max-width:100%，但由于Grid列的自适应规则，这个宽度限制并未生效。

修改方案 #

1. 调整Grid列的宽度规则 #

将容器的grid-template-columns中的auto替换为minmax(0, 1fr)，强制中间列的最大宽度为剩余可用空间，避免被内容无限撑开：

div.container {
  display: grid;
  grid-template-areas: "left main right";
  grid-template-columns: 19em minmax(0, 1fr) 19em; /* 修改此处 */
}

2. 优化pre标签的CSS #

给pre添加box-sizing: border-box确保内边距不会突破宽度限制，同时明确设置width: 100%强化宽度约束：

pre {
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box; /* 若pre有内边距则必须添加 */
}

完整修改后的代码 #

style.css #

div.container {
  display: grid;
  grid-template-areas: "left main right";
  grid-template-columns: 19em minmax(0, 1fr) 19em;
}

div.left {
  grid-area: left;
  background-color: beige;
}

div.right {
  grid-area: right;
  background-color: beige;
}

div.main {
  grid-area: main;
  padding: 0 1em; /* 可选：避免内容贴边，提升可读性 */
}

pre {
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  background-color: #f5f5f5; /* 可选：添加背景色区分代码块 */
  padding: 1em; /* 可选：添加内边距提升可读性 */
  margin: 1em 0; /* 可选：调整上下间距 */
}

demo.html #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
<div class="left">
  <p>some text</p>
</div>
<div class="main">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo velit, vitae perferendis commodi enim autem architecto optio laboriosam omnis eius dolorum similique rem, asperiores exercitationem in beatae, harum natus reiciendis.</p>
  <pre>
\usepackage{tikz}
\begin{frame}
  \tikz[remember picture, overlay] \node at (3.1415,1) {I'm here};
  \tikz[remember picture, overlay] \node at (current page.center) {I'm the centre of the frame!};
\end{frame}
  </pre>
</div>
<div class="right">
  <p>some text</p>
</div>
  </div>
</body>
</html>

效果说明 #

修改后，中间列会自适应剩余视口宽度，pre标签的内容超出部分会在自身容器内横向滚动，整个页面宽度将与屏幕保持一致，不会出现全局横向滚动条。

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