文章/答案/技术大牛

发布

社区首页 >问答首页 >在Safari中，身高为100%的Flex-grow子对象的身高为零

问在Safari中，身高为100%的Flex-grow子对象的身高为零
EN

Stack Overflow用户

提问于 2020-12-05 15:28:27

回答 1查看 179关注 0票数 2

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

flexbox

safari

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-12-05 16:18:32

解决这个问题的唯一方法就是在Safari中强制将row-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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65154755

复制

相似问题

问在Safari中，身高为100%的Flex-grow子对象的身高为零
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Safari中，身高为100%的Flex-grow子对象的身高为零EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Safari中，身高为100%的Flex-grow子对象的身高为零
EN