嵌套CSS Grid布局在Chrome与Firefox中的表现差异排查

这不是浏览器Bug，是你代码里的一个设置导致Firefox严格遵循规范而出现的异常。

问题根源 #

你给.content容器设置了grid-template-rows: 0;——这个属性会强制该网格容器的行高固定为0。Chrome在这里做了弹性兼容处理，自动扩展了容器行高来适配内部内容，但Firefox严格按照CSS Grid规范执行，导致.main这个子网格容器没有足够的空间渲染列布局，所以调整窗口大小时无法正常响应。

解决方案 #

修改.content的grid-template-rows属性，要么直接移除这行代码，要么把它改成1fr让容器自动填充可用空间：

.content { 
  grid-column: 1/2; 
  grid-row: 2/3; 
  display: grid; 
  grid-template-columns: 1fr; 
  /* 移除 grid-template-rows: 0; 或者改为以下值 */
  grid-template-rows: 1fr;
  background-color: aliceblue; 
}

补充说明 #

CSS Grid规范里，grid-template-rows: 0意味着行高被固定为0，即便内部元素溢出，Firefox也不会自动调整容器高度来适配内容；而Chrome的弹性处理掩盖了这个代码问题，这也是为什么你的第二个示例（没有这个错误设置）能在两款浏览器中正常运行的原因。

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