ARTICLE AD BOX
I'd like to make a <div> that stretches to fill all available vertical space within its parent <div>, but upon growing larger than that parent <div>—because of content inside of it, like images, or text-scrolls, while maintaining a responsive height.
So far, I've tried the min-height: 0; flex: 1; overflow-y: auto; trick that I've seen described elsewhere, but it doesn't seem to have worked. Here is an example code of what I've done thus far.
Instead of scrolling, it continues to grow and pushes past the boundaries established by the column on the left.
.box {
display: flex;
flex-direction: column;
flex-grow: 1;
border: 1px solid #000;
padding: 0.5em;
}
.inner {
flex: 1;
overflow-y: scroll;
min-height: 0;
border: 1px solid #000;
padding: 0.5em;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.5em;
}
.col {
display: flex;
flex: 1;
flex-direction: column;
flex-wrap: wrap;
gap: 0.5em;
border: 1px solid #000;
padding: 0.5em;
}
<div class="row">
<div class="col">
<div class="box">
text. <br><br> text. <br><br> text. <br><br> text. <br><br>
</div>
</div>
<div class="col">
<div class="box">
<div class="inner">
text. <br><br>text. <br><br>text. <br><br>text. <br><br>text. <br><br>
</div>
</div>
</div>
</div>
