撑破grid容器是因为默认white-space: pre不换行，长内容min-content极大，而grid轨道默认minmax(auto, 1fr)强制兜底；须将grid-template-columns改为minmax(0, 1fr)并给加min-width: 0、overflow-x: auto及word-break: break-all或overflow-wrap: break-word。
为什么<pre class="brush:php;toolbar:false;"><code></code>会撑破Grid容器</pre>
因为<pre class="brush:php;toolbar:false;"></pre>默认保留空白符且不换行，内部<code>又常含长路径、哈希、base64或无空格URL——这些内容的min-content极大，而Grid项默认min-width: auto，浏览器宁可撑开轨道也不裁剪。你加overflow: hidden到Grid容器上基本没用，它不创建BFC，子项照样“顶墙而出”。
grid-template-columns必须写minmax(0, 1fr)
把1fr直接换成minmax(0, 1fr)是前提。否则即使子项设了min-width: 0，轨道本身仍会按min-content兜底，撑宽行为照旧。
-
grid-template-columns: 1fr 1fr→ 等价于minmax(auto, 1fr) minmax(auto, 1fr)，撑破风险高 -
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)→ 显式允许轨道缩到0，解除硬性下限 - 若需保底（如代码块最小320px），改用
minmax(320px, 1fr)，但得同步处理内部溢出
<pre class="brush:php;toolbar:false;"><code></code>子项必须加三件套</pre>
只改Grid轨道不够。<pre class="brush:php;toolbar:false;"></pre>作为Grid直系子项，必须同时满足：
-
min-width: 0—— 松开收缩锁死机制 -
overflow-x: auto—— 横向滚动比裁剪更合理，用户可拖看全貌 -
white-space: pre（保持原格式）+word-break: break-all或overflow-wrap: break-word（选其一）—— 防止单行无限延伸；注意break-all在iOS 15前Safari有兼容问题，动态内容建议优先overflow-wrap: break-word
如果<pre class="brush:php;toolbar:false;"></pre>里还嵌了其他Flex/Grid容器，那些内层盒子也得单独加min-width: 0，否则撑开会传导。
图片、表格、iframe混在<pre class="brush:php;toolbar:false;"></pre>里怎么办
纯文本还能靠word-break，但<img>、<table>、<code><iframe></iframe>这类替换元素自带固有尺寸，min-width: 0对它们无效。
-
img：必须加max-width: 100%; height: auto; -
table：加table-layout: fixed; width: 100%，再配合td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -
iframe：加width: 100%; height: auto;，并确保父<pre class="brush:php;toolbar:false;"></pre>有position: relative，否则overflow裁剪失效
真正难缠的是那些没被显式包裹、直接塞进<pre class="brush:php;toolbar:false;"></pre>的第三方渲染结果——比如Markdown解析器输出的<div class="highlight">。这种得穿透样式覆盖，不能只靠父级Grid规则。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
