How to make scrollbar in one div only

I want to add two Div in the page, one Div for the top part, which is ready-only, the other one Div for the lower part, which is editable. What I want to achieve is:

  1. Make the lower Div editable and scrollable if content is too long.
  2. While scrolling the lower Div, the top Div should stay at the same position

Here is the code I have:

<html>
<body>

<div>
<div>Top Part</div>
<div contenteditable="true">Click here to type</div>
</div>
</body>
</html>

In the code above, if I click on the lower Div, we can then type, then if we keep pressing Enter, it will show the vertical scroll bar, but if I scroll, the top Div will be scrolled up too, which I want to avoid.

So, how can I make the scroll bar only applied to the lower Div?