fr单位本身不定义最小宽度，它仅在固定宽、minmax最小值及内容固有宽满足后，对剩余空间按份数比例分配；最小宽度需通过minmax()、子项min-width: 0及容器有效尺寸三者协同控制。
fr单位本身不定义最小宽度，它只参与剩余空间分配
fr不是尺寸单位，而是“份数”——它只在固定宽、minmax最小值、内容固有宽被满足后，才对剩下的可用空间做比例切分。你写1fr，等价于minmax(min-content, 1fr)，其中min-content由子项内容决定（比如一个长单词的宽度），浏览器必须先保这个下限，再分剩余空间。所以1fr列可能被撑到300px，哪怕你期望它最小200px。
想设最小宽度，必须显式用minmax()替代1fr
直接写grid-template-columns: 1fr 1fr无法控制最小列宽；要加底线，就得替换为minmax()：
-
minmax(200px, 1fr)：列宽至少200px，超出部分按比例分剩余空间 -
minmax(0, 1fr)：允许压缩到0，解决长内容撑开问题（但需配合min-width: 0） - 避免混用
minmax(200px, 1fr)和auto，后者仍按min-content算，会破坏一致性
子项min-width: auto是隐形干扰源
即使轨道写了minmax(200px, 1fr)，如果子项没设min-width: 0，它的默认min-width: auto仍会强制列宽不低于内容最小宽度（如未折行URL）。常见表现：
- 加了
white-space: nowrap后列宽突变 - DevTools Computed面板里
min-width显示auto而非0 - 嵌套Flex/Grid时，内层子项也得同步加
min-width: 0，否则撑开会传递
容器没尺寸，fr根本不会启动
fr依赖可用空间，如果Computed面板里容器width或height是0px，1fr就只是摆设：
- 父容器是Flex时，若方向为
row却没设min-height，Grid子容器高度退化为auto，grid-template-rows: 1fr失效 - 临时加
min-width: 100px或border: 1px solid能快速验证Grid是否真正运行 -
width: 800px本身不导致失效，但混用px和fr时，小数像素舍入会让列宽肉眼不均
fr本身，而在minmax()轨道定义 + 子项min-width: 0 + 容器尺寸上下文这三层共同约束。漏掉任何一层，fr都会“看起来失效”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
