css3 - 如何在移动Safari上将元素灵活拉伸(stretch)到整个设备高度？

我正在创建一个类似手风琴的移动网页，试图使用flex系列CSS属性。
简而言之，我得到这个：

但我想要这个：

该页面仅包含一组<section>，每个都有可点击的<header>和<article>：

<body>
<section id="about">
    <header><a href="#about">About</a></header>
    <article>
        This will be about.
    </article>
</section>
<section id="map">
    <header><a href="#map">Map</a></header>
    <article>
        This will be a map.
    </article>
</section>

<section id="talk">
    <header><a href="#talk">Talk</a></header>
    <article>
        This will be talk
    </article>
</section>
</body>

在任何给定时间仅应显示一个<article>（其余的隐藏），因此：

<style>
...
section:not(:target) article {
    display: none;
}
</style>

到目前为止，一切都很好。
为了使用设备屏幕的全部高度，即，展开部分的高度应为deviceheight - height of all the header elements。我已经尝试使用flex属性，并且可以在PC屏幕上（使用Chrome）按需运行它，没有问题：

html {
    height: 100%
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
    justify-content: flex-start;
    background: yellow;
}

section:target {
    flex: 1 1 auto;
}

section:not(:target) article {
    display: none;
}

section:not(:target) {
    height: auto;
    flex: 0 1 auto;
}

section {
    border: 1px solid black;
    background-color: green;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
}

header {
    padding: 0.2em;
    background-image: linear-gradient(to bottom, black, rgba(100, 100, 100, 128));
    color: white;
    font-size: 12pt;
    font-weight: bold;
    font-family: "American Typewriter", serif;
    cursor: pointer;
    flex: 0 0 auto;
}

header a {
    color: white;
}

article {
    width: 100%;
    height: 100%;
    display: block;
    background-color: yellowgreen;
    flex: 1 0 auto;
}

当展开“地图”部分时，这会在带有Chrome的台式机上产生类似以下内容：

就像我想要的那样，“地图”部分占用了所有可用空间。

现在，使用Mobile Safari，展开的部分不会使用所有可用的垂直空间，而是仅足以显示其内容：

可以看出，绿色的Map部分没有将Talk标题向下推到屏幕底部，而是通过了黄色的body背景色。

我认为可以通过指定height=device-height来纠正此问题，但这不会改变任何内容：

<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width, height=device-height"/>

我希望扩展部分使用所有可用空间，以便不显示黄色背景色。我的CSS规则中缺少什么？我想避免诉诸JavaScript。

完整的代码可以从https://gist.github.com/vramdal/4d764aef41bd39e8c96d获取

最佳答案

Safari在支持flex方面似乎落后于Chrome。

这只是使用-webkit前缀的问题。有了这些，然后删除height=device-height，我就能得到我想要的。

这是完整的代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"/>
    <meta charset="utf-8"/>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            -webkit-flex-direction: column;
            align-items: stretch;
            -webkit-align-items: stretch;
            align-content: stretch;
            -webkit-align-content: stretch;
            justify-content: flex-start;
            -webkit-justify-content: flex-start;
            background: yellow;
        }

        section:target {
            flex: 1 1 auto;
            -webkit-flex: 1 1 auto;
        }

        section:not(:target) article {
            display: none;
        }

        section:not(:target) {
            height: auto;
            flex: 0 1 auto;
            -webkit-flex: 0 1 auto;
        }

        section {
            transition: flex 500ms ease-out;
            border: 1px solid black;
            background-color: green;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            -webkit-flex-direction: column;
            align-items: stretch;
            -webkit-align-items: stretch;
            align-content: stretch;
            -webkit-align-content: stretch;
        }

        header {
            padding: 0.2em;
            background-image: linear-gradient(to bottom, black, rgba(100, 100, 100, 128));
            color: white;
            font-size: 12pt;
            font-weight: bold;
            font-family: "American Typewriter", serif;
            cursor: pointer;
            flex: 0 0 auto;
            -webkit-flex: 0 0 auto;
        }

        article {
            width: 100%;
            display: block;
            background-color: yellowgreen;
            flex: 1 0 auto;
            -webkit-flex: 1 0 auto;
        }

    </style>


</head>
<body>
<section id="About">
    <header><a href="#About">About</a></header>
    <article>
        This will be about.
    </article>
</section>
<section id="map">
    <header><a href="#map">Map</a></header>
    <article>
        This will be a map.
    </article>
</section>

<section id="talk">
    <header><a href="#talk">Talk</a></header>
    <article>
        This will be talk
    </article>
</section>

</body>
</html>