How to constrain image to available space in a flexbox

I am trying to get up to speed on using the Flexbox.

What I want to do is have a navigation panel on the left and a dynamic area on the right.

There is an issue with the dynamic area. The image does not constrain itself to the expected area, and so it overlays the Audio element.

How do I make the image constrain itself to the area that it should in the flexbox?

There could be multiple images and controls in the dynamic panel, so I want them all to fit within the expected area.

CodePen Example

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

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

<div class="myContainer">
    <div class="doOutline" style="width:150px;"><p>Fixed Width Nav Panel</p></div>
    <div class="doOutline innerContainer">
        <audio controls src="https://aitutorcdn.blob.core.windows.net/images/BirdChirping.mp4"></audio>
        <img src="https://aitutorcdn.blob.core.windows.net/images/BirdChirping.jpeg">
    </div>
</div>

Solution

The code snippet below may fix your issue.

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

}

.doOutline {
  outline: 1px dotted green;
}

.innerContainer {
  display: flex;
  flex-direction: column;
}

.innerContainer audio {
  flex-shrink: 0;
}

.innerContainer img {
  max-width: 100%;
  height: auto;
  max-height: calc(100% - 54px); /* 54px is the height of the audio controls */
  object-fit: contain;
}

<div class="myContainer">
  <div class="doOutline" style="width:150px;">
    <p>Fixed Width Nav Panel</p>
  </div>
  <div class="doOutline innerContainer">
    <audio controls src="https://aitutorcdn.blob.core.windows.net/images/BirdChirping.mp4"></audio>
    <img src="https://aitutorcdn.blob.core.windows.net/images/BirdChirping.jpeg">
  </div>
</div>

I've added flex-shrink: 0 to your audio element so the audio controls do not shrink (or essentially disappear) to make sure everything fits. On the img element itself, I've added a few things to help with sizing. max-width: 100% makes sure the image is as wide as it can be without overflowing the boundaries, height: auto sets the height responsively, and max-height: calc(100% - 54px) ensures the height doesn't exceed the size of the container. The 54px is the height of the audio controls. If you add padding or a gap to the innerContainer you need to add that size into the calc. object-fit: contain helps maintain aspect ratio.