Переполнение изображения из div ⇐ CSS

[Anonymous]

Мои изображения выходят за пределы поля div. Я создал навигационную панель высотой 160 и добавил в нее два изображения. Я объявил поле и флексбокс и добавил justify-content:space-between. Всякий раз, когда я пытаюсь поместить оба изображения в блок div, оно переполняется из моей навигационной панели и не учитывает заданную ему высоту.
Я не могу понять проблему, когда удаляю оба изображения из div не переполняются и остаются на высоте навигационной панели. Может кто-нибудь сказать мне, почему это произошло и какое решение?
Код находится здесь:

Код: Выделить всё

*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
.nav-bar{
height:160px;
width:100%;
border:1px red solid;
position:fixed;
justify-content:space-between;
}
.header-img{
border:1px blue solid;
}

Код: Выделить всё

[img]https://picsum.photos/20/20.jpg[/img]

[list]
[*][url=#]Home[/url]
[*][url=#]Shop[/url]
[*][url=#]About[/url]
[*][url=#]Blog[/url]
[*][url=#]Contact[/url]
[/list]




[img]https://picsum.photos/20/20.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/785 ... w-from-div