Grid布局1fr行子元素height:100%在Safari与Chrome表现不一致如何解决

该问题的核心原因是Safari对Grid布局中1fr行高的默认解析逻辑和Chrome不同：Safari中1fr等价于minmax(auto, 1fr)，会优先根据子元素内容高度计算行高，导致父网格的高度限制失效，子容器无法触发滚动。

核心修改点 #

• 给html、body标签添加height: 100%; margin: 0; 样式，保证根节点高度可以正确继承
• 将grid容器的grid-template-rows: auto 1fr; 改为 grid-template-rows: auto minmax(0, 1fr);，强制将第二行的高度限制为网格容器剩余可用高度，不会被子元素撑开
• 移除row2-container上冗余的height: 100%、max-height: 100%属性，仅保留overflow: auto即可触发内容溢出滚动

修复后完整代码 #

<html>
<head>
<style>
html, body {
  height: 100%;
  margin: 0;
}
</style>
</head>
<body>
    <div id="root" style="background: gray; height: 100%; width: 100%; overflow: hidden">
        <div id="grid" style="height: 100%; width: 100%; display:grid; grid-template-rows: auto minmax(0, 1fr);">
            <div id="row1" style="width: 100%; height: 100px; background: green; grid-row: 1">
            </div>
            <div id="row2-container" style="width:100%; grid-row: 2; overflow: auto">
                <div id="row2-content" style="width: 100%; height: 10000px; background: blue; overflow: visible">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

修改后Chrome、Safari均可以实现100px高固定表头、剩余高度区域滚动内容的预期效果。

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