css - CSS - 具有高度和最大高度的 div 的行为

Question

如果你有一个 div：

<div id="test">
  <img src="http://..." />
</div>

使用 CSS：

#test {
  height: x;
  max-height: x + y;
  overflow: auto;
}

是否可以安全地假设 div 将始终超过其初始高度 x 并在 x + y 处停止增长（并开始滚动），因为高度为 x + y + z 的图像加载？

如果不是，我将如何在现代浏览器中始终如一地实现这种行为？

Answer 1

不，您需要使用最小高度而不是高度。

height 将设置一个固定的高度，容器不会增长或缩小。

min-height 将设置一个最小高度和 max-height 一个最大高度，然后容器将在这两个点之间增长和缩小，并且当它大于最大高度时将应用溢出自动。