Высота сафари: 100% выпуск

Question

Надеясь, что кто-то может дать мне некоторое представление об этом. Я настраивал компонент внутри столбца начальной загрузки. Если я просматриваю его в Chrome и Firefox, два изображения имеют одинаковую высоту, но при просмотре в Safari изображения имеют разную высоту (более короткое изображение не увеличивается до полной высоты родительского элемента div). Я пытался изменить высоту на auto, а также использовать класс начальной загрузки с помощью img-Fluid, но ничего не помогло. Я просто пытаюсь получить изображение справа, чтобы расширить до полной высоты родительского 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%;
}

Вот пример codepen

Answer 1

попробуйте добавить это, у меня нет доступа к браузеру сафари, поэтому, скрестив пальцы:

CSS:

.row {
  display:flex;
}

.col-md-6 {
  align-self:stretch;
}

.outer-div
{
  display:flex;
}

.inner-div
{
  align-self:stretch;
}