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

不，你需要使用min-height而不是height。

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

min-height将设置最小高度，max-height为最大高度，然后容器将在这2个点之间增长和收缩，当溢出auto大于max-height时，将应用overflow auto。