Grid子项默认min-width: auto是规范行为，会锁定min-content宽度破坏1fr和text-overflow效果；必须在直系子元素上显式设min-width: 0，并配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确宽度才生效。
Grid子项默认min-width: auto，不是bug，是规范行为；它会让子项死守“至少容纳内容最小宽度”的底线，直接破坏1fr、minmax(0, 1fr)和text-overflow: ellipsis的预期效果。必须显式覆盖它，否则所有弹性布局逻辑都会被锁死。
为什么min-width: auto会破坏Grid轨道分配
浏览器把min-width: auto解释为min-content——也就是一段不换行文本、一张未约束图片或一个<pre class="brush:php;toolbar:false;"></pre>块的原始宽度。哪怕你写了grid-template-columns: 1fr 1fr，只要某列里有个长URL，那一列就会被撑开，其他列被迫压缩甚至坍缩。开发者工具里Computed面板显示min-width: auto，就是根源。
-
1fr不是“强制等宽”，而是“按可用空间份数分”；但min-width: auto让可用空间被提前吃掉 -
minmax(0, 1fr)写在grid-template-columns里只是轨道定义，子项仍可拒绝收缩——除非它自己也min-width: 0 - 只改容器样式（如给
.grid加min-width: 0）完全无效，必须作用于直接子元素
min-width: 0该加在哪一层、怎么写才生效
它只对**直系子项**起作用，且必须落在真实DOM节点上。框架封装、scoped样式、第三方组件都会导致选择器失效。
- 正确写法：
.grid > .item { min-width: 0; }（用>限定层级，避免污染） - Vue中用
:deep(.item)穿透作用域；React用styled-components时确保类名透传到<div> - Ant Design等UI库需手动覆盖：
.ant-card-body { min-width: 0; } - 如果
.item内部是display: flex，那它的直接子元素也得加min-width: 0，否则撑开会传导
配什么样式才能让min-width: 0真正起效
min-width: 0只是“松绑开关”，不决定内容如何处理溢出。它解决的是“能不能缩”，不是“缩了之后怎么办”。要看到实际效果，必须搭配对应场景的组合：
立即学习“前端免费学习笔记（深入）”；
- 单行省略：
min-width: 0+white-space: nowrap+overflow: hidden+text-overflow: ellipsis，且该元素要有明确宽度（来自grid-template-columns或max-width） - 长文本自动换行：
min-width: 0+overflow-wrap: break-word（推荐用于用户可见文本） - 哈希/Token暴力折行：
min-width: 0+word-break: break-all（注意iOS 15+前Safari有兼容问题） - 图片/
<table>/<pre>：min-width: 0+max-width: 100%（图片）、table-layout: fixed（表格）、overflow-x: auto（预格式化内容）
容易被忽略的嵌套和边界情况
最常踩坑的地方不在第一层，而在嵌套结构和隐式约束里。比如inline-grid、flex: 1父级、aspect-ratio、object-fit这些特性，全依赖容器先拿到可计算尺寸——而min-width: auto正是那个卡住整条链的第一道锁。
-
display: inline-grid会让容器表现像<span>，无视width: 100%和1fr，应统一改为display: grid - Grid容器本身是Flex子项时，除了自身
min-width: 0，还要确认父Flex有flex: 1或width: 100%提供宽度上下文 -
aspect-ratio必须写在Grid子项上，且其父单元格（即Grid item）必须同时有min-width: 0和min-height: 0 - Canvas、SVG、
<video>这类固有尺寸元素，光靠min-width: 0不够，还得加width: 100%或max-width: 100%
