Search code examples
google-chromesafariheightoverflowcss-grid

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

Trying to do something theoretically very simple - using display: grid to have a fixed header row and a scrollable content row - but getting totally different results in Chrome and Safari. Distilled down to the basic problem:

The code:

<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 (good):

enter image description here

Safari (bad):

enter image description here

In case the problem isn't obvious, in Safari row2-container is growing to fit its child rather than the available space in row 2 of the parent grid, and thus not scrolling the overflow from row2-content. In other words it seems height: 100% is getting ignored for grid children if the row size is 1fr.

How can I get what I want in both Safari and Chrome? Thanks!

Solution

  • The problem seems to have been fixed in Safari 14. I was using 13.

    Also setting row2-container height: auto seems to give the desired result as well even in Safari 13. Either way this seems to have been a bug prior to version 14 that is now fixed.