如何修复CSS Grid子元素溢出问题？-css教程-PHP中文网

直接加overflow:hidden大概率无效，因grid子项默认min-width:auto锁定最小宽度，必须同时满足容器有明确宽高、轨道用minmax(0,1fr)、子项设min-width:0三者，再配overflow:hidden才真正生效。

如何修复css grid子元素溢出问题？

直接加 overflow: hidden 大概率没用——Grid 子元素溢出不是“内容多”，而是轨道没被正确约束、子项没被主动压制，三者缺一不可。

因为 Grid 容器默认不会限制子项尺寸，overflow 只裁剪「容器的内容框」，但子项会优先撑开轨道甚至整个容器。除非你同时满足：

写 1fr 只表示“分剩余空间”，但不承诺能缩到多小；浏览器仍按内容的 min-content 给轨道分配最小宽度。长 URL、JSON 字段、无空格英文串会直接把整列撑爆。

必须显式声明：grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

Safari 14.1 及更早版本对 0 解析异常，可用 @supports (grid-template-columns: minmax(0, 1fr)) 做降级
搭配 repeat(auto-fit, ...) 更安全，auto-fill 会保留空轨道导致列宽失衡
别混用 minmax(0, 1fr) auto —— auto 列会抢走最小宽度，破坏比例

minmax(0, 1fr) 开了门，但子项默认站在门口不动（min-width: auto）。必须手动让它进门：

直接写：.grid > .item { min-width: 0; }（注意选择器层级，避免污染非 Grid 场景）
嵌套 Flex/Grid 的子项也要加：.item > .inner { min-width: 0; }
图片、<pre class="brush:php;toolbar:false;"></pre>、<table> 等固有尺寸元素最容易漏，需单独加固 <li>此时再配 <code>overflow: hidden 才真正开始裁剪，而不是等它先撑破容器

轨道收缩 + min-width: 0 解决了“容器能不能缩”的问题，但“内容怎么显示”还得另配：

长无空格文本（URL、base64）：word-break: break-all 或 overflow-wrap: break-word（后者更温和）
单行标题截断：white-space: nowrap; overflow: hidden; text-overflow: ellipsis（三者缺一不可）
图片强制响应：img { max-width: 100%; height: auto; display: block; }
多行文本截断（现代浏览器）：display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical

最常翻车的是嵌套结构里只改了外层 Grid 轨道，却忘了内层 Flex 容器的子项也要加 min-width: 0 —— 撑开会逐层传导，最后发现溢出点根本不在你以为的位置。