先记住这个答案
一个 600px 的容器分两列还设了 20px 间距：50% 50% 两列各按容器宽度取 300px，再加间距就可能超过容器；1fr 1fr 会在轨道计算中扣除间距后分配剩余宽度。前提还要看列内容的自动最小尺寸，长得不能断开的内容可能让 fr 列拒绝继续变窄。遇到溢出时别只看比例数字。
- 百分比轨道按容器尺寸求值
fr分享扣除间距后的余量50% 50%加间距可能溢出- 长内容可抬高
1fr的下限
两等分卡片加间距为何溢出
页面要做两等分卡片，中间留 24px 间隔。容器宽 600px 时，50% 50% 给两列各 300px，再加间距得到 624px。改成 1fr 1fr，轨道各分享扣除间距后的 576px，通常各得 288px。若其中一列有不可断开的长代码，1fr 的默认最小行为仍可能导致溢出；可按设计使用 minmax(0, 1fr) 并处理内部内容。
.cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px; /* 先扣间距，再分两份剩余空间 */
}
.cards > * { min-width: 0; }间距先占 24px，剩下的宽度再由两个弹性轨道平分。
fr 分余量，百分比取容器比例
fr 是弹性轨道单位，参与分配轨道尺寸算法里的可用空间；百分比先从容器尺寸取得对应长度。容器在该轴上的尺寸不确定时，百分比轨道的求值规则更复杂，不能总按一个已知像素宽来口算。1fr 也不等于无条件压成一半，轨道最小尺寸和项目的固有贡献会影响结果。minmax(0, 1fr) 把弹性轨道下限明确设为零，适合要严格平分又能处理内部溢出的两列布局。
不要把 fr 理解成“容器宽度的百分比”。假设容器内容宽 600px，两列之间 gap: 20px，没有其他限制时，两个 1fr 分的是扣掉沟槽后的 580px，各占约 290px；两个 50% 则先各得 300px，加上 20px 沟槽后总宽约 620px。这个手算只适合已知容器尺寸、项目不会抬高轨道最小值的简化情形。实际页面若有长代码或图片，还要检查自动最小尺寸；可试 minmax(0, 1fr) 与内容滚动策略。
容易答错的地方
- 把
1fr当成100% fr分的是剩余可分配空间，百分比取的是容器比例；有间距时差别尤其明显。- 认为
1fr 1fr永远等宽 - 长内容的最小尺寸可能抬高其中一列的下限；要严格等分时检查
minmax(0, 1fr)与内部溢出。
面试官还会怎么问？
为什么 50% 50% 加 gap 会溢出？
两个百分比轨道已经合计容器宽度的全部，gap 另外占空间。
minmax(0, 1fr) 解决什么？
显式将轨道最小值设为零，避免内容自动下限阻碍弹性轨道缩小。
容器宽度不确定时还能直接口算百分比吗？
不能。百分比轨道在不确定尺寸下会按 Grid 轨道尺寸规则处理，应看具体布局上下文。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。