网格 Child 高度 = 100% 在 Safari 和 Chrome 中表现不同

Question

尝试做一些理论上非常简单的事情 - 使用 display: grid 有一个固定的 header 行和一个可滚动的内容行 - 但在 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>

Chrome（好）：

Safari（差）：

如果问题不明显，在 Safari 中 row2-container 正在增长以适应其 child 而不是 parent 第 2 行中可用的 space grid，因此不会滚动 row2-content 的溢出。换句话说，如果行大小为 1fr.

，grid children 似乎会忽略 height: 100%

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

Answer 1

问题似乎已在 Safari 14 中修复。我使用的是 13。

即使在 Safari 13 中，设置 row2-container height: auto 似乎也能给出预期的结果。无论哪种方式，这似乎是版本 14 之前的错误，现在已修复。

网格 Child 高度 = 100% 在 Safari 和 Chrome 中表现不同

Grid Child Height = 100% Behaves Differently in Safari vs. Chrome

safari

height

google-chrome

overflow

css-grid