Struggling to make the flex: column work properly so child elements do not exceed the parent container. The image on the left needs to take up 100% of the container's height:
.container {
width: 500px;
height: 300px;
border: solid blue 1px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.tall {
height: 100%;
width: 300px;
background: yellow;
}
.row {
margin: 10px 0;
background: red;
min-height: 10px;
}<div class="container">
<div class="tall"></div>
<div class="row">This is text that should flow to multiple lines, adjusting its width based on the left block.</div>
<div class="row"></div>
<div class="row"></div>
</div>No matter what I attempt, the rows on the right keep extending beyond the container, always matching the container's width instead of adjusting to the available space. Any suggestions on how to resolve this issue?