How do I make the scrollbar on a div only visible when necessary?

I have this div:

<div style='overflow:scroll; width:400px;height:400px;'>here is some text</div>

The scrollbars are always visible, even though the text does not overflow. I want to make the scrollbars only be visible when necessary - that is, only visible when there is enough text in the box that they are needed. Like a textarea does. How do I do this? Or is my only option to style a textarea so it looks like a div?

Use overflow: auto. Scrollbars will only appear when needed.

(Sidenote, you can also specify for only the x, or y scrollbar: overflow-x: auto and overflow-y: auto).

try this:

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>

try

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>