身高 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