CSS 溢出需主动约束尺寸并明确行为：Grid 用 minmax()设轨道边界，单元格内设 width/overflow/text-overflow 等控制内容；table 需用 table-layout:fixed 配合 width；避免无宽设 overflow、Flex 误用 minmax 等陷阱。
当 CSS 内容溢出单元格（如表格单元格 td 或网格 /弹性布局 中的项目）时，常导致列宽异常撑开、换行失效、横向滚动或整体布局错乱。核心解决思路是：** 主动约束尺寸 + 明确溢出行为 **。结合 minmax()（多用于 Grid）与 overflow 是高效方案，但需注意二者作用层级和适用场景。
用 minmax() 为网格轨道设弹性边界
minmax(min, max) 常用于 grid-template-columns 或 grid-template-rows，它定义轨道的尺寸范围，防止内容无节制撑大容器。例如：
让表格式布局（用 Grid 模拟）中“描述”列最小保持 120px，最大不超过 300px，超出部分由 overflow 处理：
.grid-container {
display: grid;
grid-template-columns: 80px minmax(120px, 300px) 1fr;
}
这样即使文本很长，该列也不会无限变宽，为后续 overflow 留出作用空间。
立即学习 “ 前端免费学习笔记（深入）”；
对单元格内容盒设置 overflow 和尺寸限制
仅靠 minmax() 不够——它控制的是轨道（列宽），真正截断内容需作用于单元格内部元素。关键三步：
- 给单元格（如
td或 Grid 项目）设width: 100%或max-width: 100%，使其尊重父轨道尺寸 - 添加
overflow: hidden（或auto/ellipsis配合text-overflow） - 确保内联内容（如文字）可换行：
word-break: break-word或overflow-wrap: break-word
示例：
td.desc {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-word;
}
表格（table）元素的特殊处理
原生 table 对 minmax() 无效（它属于 Grid 函数），此时应改用表格专属属性：
- 设
table-layout: fixed，让列宽由col或第一行th/td的宽度决定，而非内容 - 配合
width+overflow在单元格内生效：td {width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} - 避免使用
display: table-cell在非表结构中——它不响应minmax，且 overflow 支持不稳定
避免常见陷阱
以下做法容易失效，需规避：
- 只写
overflow: hidden却没设明确宽度（如width或max-width），浏览器 仍按内容撑开 - 在 Flex 容器子项上滥用
minmax()（它不是 Flex 属性），应改用flex-basis+min-width/max-width - 对含
white-space: nowrap的文本同时设text-overflow: ellipsis，却忘了必须搭配overflow: hidden和定宽
