Safari高度:100%问题

Question

希望有人能给我一些见解。我一直在引导程序列中设置一个组件。如果我在Chrome和Firefox中查看，这两个图像的高度相同，但当我在Safari中查看时，图像的高度不同(较短的图像不会扩展到父div的全高(。我尝试过将高度更改为auto，以及使用引导img流体类，但似乎都不起作用。我只是想把右边的图像扩展到父div的整个高度。有人知道如何只用css实现这一点吗？

提前感谢！

html:

<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="outer-div center">
<img src="https://i.ytimg.com/vi/Vbum3VZV9g0/maxresdefault.jpg" class="responsive inner-div" alt="Smiley face">
</div>
</div>
<div class="col-md-6">
<div class="outer-div center">
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" class="responsive inner-div" alt="Smiley face">
</div>
</div>
</div>
</div>

css：

.mt-20 {
margin-top: 20px;
}
.responsive {
width: 100%;
height: auto;
}
.center {
margin: auto;
width: 90%;
border: 3px solid #73AD21;
}
.inner-div
{
transition: all .75s ease-in-out;
height: 100%;
}
.inner-div:hover
{
transform: scale(1.3);
}
.outer-div
{
overflow: hidden;
height: 100%;
}

这是一个代码笔示例

Answer 1

试着把这个扔给它，我没有访问safari浏览器的权限，所以，祈祷：

css：

.row {
display:flex;
}
.col-md-6 {
align-self:stretch;
}
.outer-div
{
display:flex;
}
.inner-div
{
align-self:stretch;
}