为何grid-template-rows: n fr同时影响父子DOM元素？Chrome/Firefox表现差异

设置grid-template-rows: n fr时，.Shell元素未按预期展开，反而被该属性限制高度，同时子元素.Box的高度呈现出类似n*n fr的放大效果。该现象仅出现在Google Chrome中，Firefox表现符合预期，需明确此问题的原因及是否需要修复。

场景代码 #

CSS代码 #

* {}
        
.ShellBox {
    display:flex;
}

.Shell {
    background-color: #0f0;
    width: 100px;
    display: grid;
}

.Shell1 {
    grid-template-rows: 0.1fr;
}

.Shell2 {
    grid-template-rows: 0.5fr;
}

.Shell3 {
    grid-template-rows: 1fr;
}

.Box {
    min-height: 0;
    border: 1px solid #f00;
    border-top: 0 !important;
}

.Box>div {
    height: 99px;
    width: 98px;
}

HTML代码 #

<div class="ShellBox">
    <div>
        <div class="Shell Shell1">
            <div class="Box">
                <div></div>
            </div>
        </div>
    </div>
    <div>
        <div class="Shell Shell2">
            <div class="Box">
                <div></div>
            </div>
        </div>
    </div>
    <div>
        <div class="Shell Shell3">
            <div class="Box">
                <div></div>
            </div>
        </div>
    </div>
</div>
<br /><br />
<div class="ShellBox">
    <div class="Shell Shell1">
        <div class="Box">
            <div></div>
        </div>
    </div>
    <div class="Shell Shell2">
        <div class="Box">
            <div></div>
        </div>
    </div>
    <div class="Shell Shell3">
        <div class="Box">
            <div></div>
        </div>
    </div>
</div>

原因分析 #

这是Chrome与Firefox在Grid布局fr单位计算逻辑上的浏览器差异问题。当Grid容器（.Shell）作为flex容器（.ShellBox）的子元素，且未设置明确高度约束时，Chrome错误地将fr单位的计算基准绑定到容器的内容高度，导致Grid行高被异常限制，进而引发子元素高度的连锁异常放大；而Firefox则遵循规范，将fr单位基于容器的可用伸缩空间进行计算，表现符合预期。

解决方案 #

要修复Chrome中的异常表现，可采取以下两种方式：

• 给Grid容器添加明确高度约束：给.Shell元素设置height: 100%或具体数值（如min-height: 100px），让Grid容器有明确的高度参考来计算fr单位。修改后的核心CSS如下：

.Shell {
    background-color: #0f0;
    width: 100px;
    display: grid;
    height: 100%; /* 添加明确高度约束 */
}

• 改用grid-auto-rows属性：替换grid-template-rows为grid-auto-rows，让Grid自动根据内容调整行高，同时满足布局需求，示例：

.Shell1 {
    grid-auto-rows: 0.1fr;
}
.Shell2 {
    grid-auto-rows: 0.5fr;
}
.Shell3 {
    grid-auto-rows: 1fr;
}

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