我如何在 CSS 中执行 "min-height: height of content; height: relative to viewport;"？

Question

我的 HTML 页面上有一些可伸缩元素。

有了这个CSS

.stretchable-element {
    height: 25%;
}

随着浏览器 window 高度的增加，可拉伸元素会变高。随着浏览器 window 高度的降低，可拉伸元素会变短。但是当浏览器 window 变得太短时，可伸缩元素中的内容就会溢出。我有多个可伸缩元素，所以我不能简单地设置一个固定的 min-width。我想要实现的是这样的：

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

基本上，当浏览器 window 在 y 轴上变短时，可拉伸元素的高度将降低，直到它们各自达到一个点，在这个点上它们刚好足够大以适应它们所显示的内容每个都包含，之后它们不会变短。

Answer 1

我认为您需要使用 javascript 来完成此操作。基本上当 window 加载时，您需要找到每个可拉伸元素的所有内容的高度。然后您只需要使用 javascript.

将每个可拉伸元素的最小高度设置为该值