Firefox中0px宽网格项含左外边距元素溢出容器的问题问询

这明显是Firefox 120引入的Bug，不符合CSS Grid布局规范的预期行为，具体分析如下：

触发条件与异常表现 #

• 仅在Firefox 120版本出现，此前版本无此问题
• 必现场景：
  • Grid容器设置grid-template-columns: 1fr auto，网格项位于第2列（auto类型轨道）
  • 该网格项宽度设为0px，内部包含一个宽度0px且margin-left > 0px的元素
• 异常结果：网格项会直接溢出Grid容器
• 非触发场景：
  • 网格项宽度哪怕设为0.1px，溢出问题立即消失
  • Grid容器设置grid-template-columns: auto 1fr，网格项位于第1列（auto类型轨道）时无溢出

规范依据 #

根据CSS Grid规范，auto类型的列轨道尺寸需基于网格项的内容盒模型大小计算。当网格项自身宽度为0px，内部元素宽度也为0px时，仅存在正的margin-left，此时网格项的实际占用空间应被正确计算为margin-left的数值，轨道尺寸需容纳这部分空间。Firefox 120在特定轨道顺序下未正确处理该盒模型计算，导致溢出，属于实现错误。

临时解决方法 #

• 给网格项或内部元素设置visibility: auto或visibility: hidden
• 用额外的<div>包裹内部元素，修正盒模型计算逻辑

内容的提问来源于stack exchange，提问作者user2227119