网格子高度 = 100% 在 Safari 和 Chrome 中的行为不同答案

【问题标题】：Grid Child Height = 100% Behaves Differently in Safari vs. Chrome网格子高度 = 100% 在 Safari 和 Chrome 中的行为不同
【发布时间】：2021-09-15 05:19:15
【问题描述】：

尝试做一些理论上非常简单的事情 - 使用 display: grid 拥有一个固定的标题行和一个可滚动的内容行 - 但在 Chrome 和 Safari 中得到完全不同的结果。提炼到基本问题：

代码：

<html>
<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 1fr; height: 100%">

            <div id="row1" style="width: 100%; height: 100px; background: green; grid-row: 1">
            </div>

            <div id="row2-container" style="width:100%; height: 100%; max-height: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>

铬（好）：

Safari（坏）：

如果问题不明显，在 Safari 中 row2-container 正在增长以适应其子级而不是父级 grid 的第 2 行中的可用空间，因此不会滚动来自 row2-content 的溢出。换句话说，如果行大小为1fr，height: 100% 似乎会被grid 子级忽略。

如何在 Safari 和 Chrome 中获得我想要的内容？谢谢！

【问题讨论】：

标签： google-chrome safari height overflow css-grid

【解决方案1】：

问题似乎已在 Safari 14 中得到解决。我使用的是 13。

另外设置row2-container height: auto 似乎即使在 Safari 13 中也能提供所需的结果。无论哪种方式，这似乎都是版本 14 之前的错误，现已修复。

【讨论】：