css - 收缩元素而不是整页

Question

我有一个包含2个div的页面。当我减小浏览器窗口的高度时，我希望第一个div缩小（并且滚动条出现在它上面），而第二个div应该保持它的高度。

是否可以用纯CSS实现这个逻辑？

<div class="shrinkit">
  ..many lines of text..
</div>
<div class="noscroll">
  ..many lines of text..
</div>
<style>
.shrinkit {
  background-color: blue;
}
.noscroll {
  background-color: green;
}
</style>

Answer 1

只需给第一个div height:auto;和第二个div，给你想要的高度，例如height:200px