How do I do "min-height: height of content; height: relative to viewport;" in CSS?

Question

I have some stretchable elements on my HTML page.

With this CSS

.stretchable-element {
    height: 25%;
}

As the height of the browser window increases, the stretchable element gets taller. As the height of the browser window decreases, the stretchable element gets shorter. But when the browser window gets too short, the content in the stretchable element will overflow. I have multiple stretchable elements so I can't simply set a fixed min-width. What I want to achieve is something like this:

.stretchable-element {
    height: 25%;
    min-height: just tall enough so the text inside this element will not overflow
}

Basically, when the browser window is made shorter on the y-axis, the stretchable elements will decrease in height until they each hit a point where they're just big enough to fit the content that they each contain, and they won't get any shorter after that.

Answer 1

I think you'll need to do this with javascript. Basically when the window loads, you'll need to find the height of all the contents for each stretchable-element. Then you just need to set each stretchable-element's min-height to that value using javascript.