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

Question

我有一个 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>

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-12-05 08:18:32

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-12-05 08:18:32

解决方案1
1 已采纳 2020-12-05 08:18:32