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

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>

Change overflow property of CSS block to auto.

overflow: auto;

It will automatically add a scrollbar to the left only when needed.

Related