原因
简单来说,核心原因是 1fr 在处理内容时,会优先保证内容的完整性,而不是严格遵守父容器宽度。
具体到你的场景,Avue 表格内容(如长文本、图片等)往往有自己的最小宽度,这个宽度超过了 1fr 理论上应该占有的空间,所以容器就被撑开了。
解决方法
修改轨道尺寸:将 grid-template-columns: 1fr 1fr; 改为 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);。minmax(0, 1fr) 这行代码,是将列道的最小值设定为 0,而不是默认的 auto,从而强制允许内容压缩。