css - shrink element instead of whole page

Question

I have a page with 2 divs. As I decrease the height of the browser window, I want the first div to shrink (and scrollbars to appear on it), while the second div should keep it's height.

Is it possible to implement this logic with pure 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

Just give the first div height:auto; and to the second div, give the height you want e.g height:200px