DIV that stretches, but scrolls?
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;
}
text.
text.
text.
text.
text.
text.
text.
text.
text.