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

[Anonymous]

Я пытаюсь освоить использование Flexbox.
Я хочу, чтобы панель навигации располагалась слева, а динамическая область — справа. p>
Проблема с динамической областью. Изображение не ограничивается ожидаемой областью и поэтому накладывается на элемент Audio.
Как заставить изображение ограничиться той областью, которая должна быть во флексбоксе?
p>
На динамической панели может быть несколько изображений и элементов управления, поэтому я хочу, чтобы все они помещались в ожидаемую область.
Пример CodePen

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

.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