260

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?

Benubird
  • 18,551
  • 27
  • 90
  • 141

9 Answers9

504

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).

Hidde
  • 11,493
  • 8
  • 43
  • 68
  • 17
    Note that overflow-y does only work if you specify `max-height` – Black Jul 12 '18 at 10:30
  • 3
    overflow-y doesn't need max-height. I never used max-height with overflow-y and it worked everytime. – Sumafu Jan 18 '19 at 09:59
  • 2
    @Sumafu you may need it depending on the case, as I could experience right now. – David Feb 12 '19 at 14:14
  • 2
    You would need `height` or `max-height` set if you're using `absolute` or `fixed` position on the overflow element as these prevent the element from resizing based on page or viewport boundaries. – Scott Schupbach Dec 18 '19 at 18:45
17

try this:

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
kleinohad
  • 5,800
  • 2
  • 26
  • 34
10

Change overflow property of CSS block to auto.

overflow: auto;

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

Showrin Barua
  • 1,737
  • 1
  • 11
  • 22
Jaisal Shah
  • 183
  • 1
  • 8
9

try

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
pbaris
  • 4,525
  • 5
  • 37
  • 61
5

try 

<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">
GrvTyagi
  • 4,231
  • 1
  • 33
  • 40
2

I found that there is height of div still showing, when it have text or not. So you can use this for best results.

<div style=" overflow:auto;max-height:300px; max-width:300px;"></div>
Shailendra Kumar
  • 138
  • 2
  • 12
0

You can try with below one:

  <div style="width: 100%; height: 100%; overflow-x: visible; overflow-y: scroll;">Text</div>
Papun Sahoo
  • 407
  • 5
  • 13
  • Thanks, this was helpful. This solution works best if you don't have specific height/width (a more dynamic UI.) – DoomGoober Aug 15 '20 at 18:16
0

Stackblitz Playgrond

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    #scrollable-content {
        background: #eee;
        height: 150px;
        width: 400px;
        overflow-y: scroll;
    }
    </style>
</head>

<body>
    <div id="original-content"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
    <br />
    <div id="scrollable-content"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
</body>

</html>
khizer
  • 1,242
  • 15
  • 13
0

overflow : auto is the magical code.

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: scroll;
}

div.ex2 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: hidden;
}

div.ex3 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: auto;
}

div.ex4 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: clip;
}

div.ex5 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: visible;
}
</style>
</head>
<body>

<h1>The overflow Property</h1>

<p>The overflow property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.</p>

<h2>overflow: scroll:</h2>
<div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: hidden:</h2>
<div class="ex2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: auto:</h2>
<div class="ex3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: clip:</h2>
<div class="ex4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: visible (default):</h2>
<div class="ex5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

</body>
</html>
Surya R Praveen
  • 3,393
  • 1
  • 24
  • 25