SAFARI-给子div高度:100%取视口高度，而不是父高度

Question

我有一个容器，它有两个孩子。它们使用柔性并排放置。第二个子项具有固定的高度，因此由于对齐项目：拉伸(默认的flex属性(，第一个子项也会拉伸并占据第二个子的高度。

现在还有第一个div的子级(.child-a(，它只占用其内容的空间。但我希望这个孩子能达到他父母的全部身高。因此，如果我给这个孩子高度：100%，它在chrome中工作得很好，但在Safari中它采用了视口高度。这个问题有什么解决办法吗？？

我有一个简单的HTML标记，如下面的

<div class="container">
<div class="a">
<div class="child-a">Child of div a</div>
</div>
<div class="b">Div B</div>
</div>
.container {
display: flex;
justify-content: space-between;
}
.a,
.b {
width: 49%;
}
.a {
background: yellow;
}
.child-a {
background: red;
}
.b {
height: 200px;
background: blue;
}

尝试给予.child-a，100%的高度，然后在safari和chrome中验证两个

注意：在safari中的codepen以及chrome上运行良好

Answer 1

您的代码在safari中使用本地index.html文件对我有效。然而，如果它仍然不适用于您，您也可以尝试将display: flex;赋予.child-a:

.child-a {
background: red;
display: flex;
height: 100%;
}

Answer 2

您应该将display: flex;添加到div‘a’，将flex : 1添加到子div‘child-a’。

请参阅下面的代码：

<div class="container">
<div class="a">
<div class="child-a">Child of div a</div>
</div>
<div class="b">Div B</div>
</div>
<style>
.container {
display: flex;
justify-content: space-between;
}
.a,
.b {
width: 49%;
}
.a {
background: yellow;
display: flex;
}
.child-a {
background: red;
flex:1;
}
.b {
height: 200px;
background: blue;
}
</style>