高度为 100% 的 Flex-grow 孩子在 Safari 中的高度为零答案

【问题标题】：Flex-grow child with height 100% has a zero height in Safari高度为 100% 的 Flex-grow 孩子在 Safari 中的高度为零
【发布时间】：2021-03-17 04:00:58
【问题描述】：

我有一个 flex（列）容器（.parent），里面有两个元素（.row-1，.row-2）。第一个元素.row-1 有一个固定的高度，flex-shrink 等于1。第二行.row-2 的flex-grow 设置为1。此外，第二行有一个高度等于100% 的子元素。预期的行为是子元素 (.child) 与其父元素 (即.row-2) 的高度相同，这在 Chrome 和 Firefox 中会发生。但是，在 Safari 中，子元素 .child 的高度改为 0。我在这里遗漏了什么吗？

这是我的代码：

<!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>

【问题讨论】：

在 [link]stackoverflow.com/questions/33636796/… 上有相当多的讨论，但接受的答案已有 5 年历史，而且解释非常深入 - 并非所有我都能理解。我找到了一个看起来很简单的解决方法并将其放在此处的答案中，但它可能并不适合所有用例。
您没有遗漏任何东西。这是 Safari 中的一个错误。它已在 Safari STP 114 中修复。在大多数用户使用尚未发布的 Safari 15 之前，您必须使用如下解决方法。

标签： html css flexbox safari

【解决方案1】：

我可以解决子元素在 Safari 中没有占据第 2 行的全部高度的唯一方法是强制第 2 行也为 flex 并设置 align-items:stretch 似乎可以继承由孩子确定，如果你把身高：100% 出来。但我必须设置宽度：在这种情况下为 100%，否则它似乎是自动的。

抱歉，我无法解释这种行为，修复可能不适合所有用例，但这里是：

            * {
                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>

【讨论】：