Как ограничить изображение доступным пространством во флексбоксе ⇐ CSS

[Anonymous]

Я пытаюсь освоить использование Flexbox.
Я хочу, чтобы панель навигации располагалась слева, а динамическая область — справа.< /p>
Возникла проблема с динамической областью: изображение не ограничивается ожидаемой областью и поэтому перекрывает элемент Audio.
Как чтобы изображение ограничивалось той областью, которую оно должно flexbox?

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

.myContainer {
outline: 5px dotted green;
height: 88vh;
display: flex;
gap:25px;
padding:25px;

}
.doOutline{
outline: 1px dotted green;
}
.innerContainer{
display:flex;
flex-direction:column;
}

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

Fixed Width Nav Panel


[img]https://aitutorcdn.blob.core.windows.net/images/BirdChirping.jpeg[/img]

Подробнее здесь: https://stackoverflow.com/questions/793 ... -a-flexbox