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.
.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>