1fr auto 不可靠，因 auto 列按 minmax(min-content, max-content) 计算，不主动收缩，易撑宽整行、挤占 1fr；推荐用 1fr minmax(0, max-content) 并配 overflow 截断。
直接用 grid-template-columns: 1fr auto 很可能出错——auto 列会撑开整行，导致左侧 1fr 失效，实际效果不是“填剩余 + 包内容”，而是“内容多宽，整行就多宽”。
为什么 1fr auto 在多数场景下不可靠
auto 的本质是 minmax(min-content, max-content)，它不主动让步，只要子元素有不可折行的长文本、未约束的图片或设置了 width: 100% 的后代，就会把整列拉宽，挤占 1fr 的空间。常见现象包括：右侧操作按钮变宽、ID 字段溢出、横向滚动条意外出现。
- 浏览器不会“智能压缩”auto列；它只按内容固有尺寸计算基线宽度
- 当父容器宽度受限（如卡片内嵌）时，auto列卡在
min-content处，不再收缩，布局断裂 -
1fr auto在 Safari 和旧版 Chrome 中对min-content解析更保守，表现更不稳定
真正可控的两栏写法：用 minmax(0, max-content) 替代 auto
把“包住内容但可收缩到零”这个意图明确告诉 Grid，而不是依赖模糊的 auto 行为。
/* 推荐写法 */
.container {
display: grid;
grid-template-columns: 1fr minmax(0, max-content);
}
-
minmax(0, max-content)允许轨道收缩到 0px，避免强制撑开 - 右侧子项需配合
overflow: hidden; text-overflow: ellipsis; white-space: nowrap才能真正截断 - 若右侧是图标/按钮等固定尺寸元素，可进一步简化为
fit-content(40px)，语义更清晰
什么时候该放弃两栏 Grid，改用其他方案
如果右侧只是单个紧凑控件（如删除按钮、开关），Grid 反而增加复杂度。此时更轻量的做法是：
- 用
display: flex+margin-left: auto：主内容设flex: 1，按钮自动贴右 - 用
display: contents配合父级 Flex：移除 Grid 容器语义，仅保留视觉结构，减少渲染层级 - 纯语义 HTML + CSS 实用类：
class="d-flex justify-content-between"（Bootstrap 等框架中更直观）
最易被忽略的一点：无论用哪种写法，都要检查右侧子项是否隐式继承了 white-space: normal 或 min-width: fit-content —— 这些默认行为会悄悄破坏你精心设计的 minmax() 边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
