Flex-grow child with height 100% has a zero height in Safari

Question

I have a flex (column) container (.parent) with two elements inside it (.row-1, .row-2). The first element .row-1 has a fixed height and flex-shrink equals to 1. The second row .row-2 has a flex-grow set to 1. Additionally, the second row has a child element with height equals to 100%. The expected behavior is that the child element (.child) becomes the same height as its parent (i.e., .row-2), which it does in Chrome and Firefox. However, in Safari the child element .child has a height of 0 instead. Am I missing something here?

Here is the code I have:

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .parent {
                display: flex;
                flex-direction: column;
                background: red;
                height: 100vh;
            }

            .row-1 {
                flex-shrink: 1;
                height: 40px;
                background: green;
            }

            .row-2 {
                flex-grow: 1;
                background: yellow;
            }

            .child {
                background: cyan;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="row-1"></div>
            <div class="row-2">
                <div class="child"></div>
            </div>
        </div>
    </body>
</html>

There's quite a bit of discussion on [link]https://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent but the accepted answer is 5 years old and quite deep in its explanation - not all of which I could follow. I've found what looks like a simple workaround and put it in an answer here, but it may not suit all use cases. — A Haworth, Dec 05 '20 at 08:30
You are not missing anything. This is a bug in Safari. It was fixed in Safari STP 114. Until most users are on Safari 15, which hasn't been released yet, you'll have to use a workaround like the one below. — dgrogan, Dec 05 '20 at 08:33

score 2 · Accepted Answer · answered Dec 05 '20 at 08:18

The only way I could get round the problem of the child element not taking on the full height of row-2 in Safari was to force row-2 also to be flex and set align-items: stretch which seems to get inherited by the child OK if you take the height: 100% out. BUT I had to set the width: 100% in this case otherwise it just seemed to be auto.

Sorry I can't explain this behavior and the fix may not suit all use cases but here it is:

            * {
                margin: 0;
                padding: 0;
            }
            .parent {
                display: flex;
                flex-direction: column;
                background: red;
                height: 100vh;
            }

            .row-1 {
                flex-shrink: 1;
                height: 40px;
                background: green;
            }

            .row-2 {
                display: flex;
                flex-grow: 1;
                background: yellow;
                align-items: stretch
            }

            .child {
                background: cyan;
                width: 100%;
            }

        <div class="parent">
            <div class="row-1"></div>
            <div class="row-2">
                <div class="child">child div</div>
            </div>
        </div>

Flex-grow child with height 100% has a zero height in Safari

1 Answers1