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

Question

I have this div    lt div style  overflow scroll  width 400px height 400px   gt here is some text lt  div gt    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

User · Accepted Answer

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

User · Answer

You can try with below one      lt div style  width  100   height  100   overflow-x  visible  overflow-y  scroll   gt Text lt  div gt

User · Answer

try this    lt div style  overflow auto  width 400px height 400px   gt here is some text lt  div gt

User · Answer

try    lt div id  boxscroll2  style  overflow  auto  position  relative   tabindex  5001  gt

User · Answer

try   lt div style  overflow auto  width 400px height 400px   gt here is some text lt  div gt

User · Answer

I found that there is height of div still showing  when it have text or not  So you can use this for best results    lt div style   overflow auto max-height 300px  max-width 300px   gt  lt  div gt

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

Examples related to css

Examples related to html

Examples related to scrollbar