overflow-y: scroll not working, showing style but cannot be scrolled?

Question

my code is simple like this:

.list {
    margin: auto;
    height: 285px;
    width: 300px;
    overflow-y: scroll;
}

<div class="list">
  <ul>
    <li>hello world</li>
    <li>hello jupiter</li>
    <li>hello mars</li>
  </ul>
</div>

it shows style of a scroll on the side but lacking that scroll you use to move up and down?

I guess there is no need to scroll? Make the list longer or specify less height. — ideaboxer, Aug 21 '17 at 17:44
It's not so clear what you need to have. Do you want the box to scroll left-right and up-down? — Federica Venuto, Aug 21 '17 at 17:45
The element will only scroll if there is more content than will fit in it. If your three list items are <= 285px high, the div isn't going to scroll. — katniss.everbean, Aug 21 '17 at 17:47

score 1 · Answer 1 · answered Aug 21 '17 at 17:48

You can get it by reducing height like following

.list {
  margin: auto;
  height: 70px;  /* Reduse height */
  width: 300px;
  overflow-y: scroll;
}

<div class="list">
  <ul>
    <li> hello world </li>
    <li> hello jupiter </li>
    <li> hello mars </li>
  </ul>
</div>

Jimenemex · Accepted Answer · 2017-08-21T17:57:16.940

There is no need to scroll.

The browser will only scroll if the content within the div needs to scroll in order to see more items in the ul. To make the scroll bar appear only if it needs to be there, you can use overflow-y: auto.

You implicitly tell the browser to show to the scroll bar even though it's not needed with such little ul elements. Try adding more elements to see the scroll bar work properly.

.list {
    margin: auto;
    height: 285px;
    width: 300px;
    overflow-y: auto; /* This changed */
}


<div class="list">
    <ul>
        <li> hello world </li>
        <li> hello jupiter </li>
        <li> hello mars </li>
        <li> hello world </li>
        <li> hello world </li>
        <li> hello world </li>
        <li> hello world </li>
        <li> hello world </li>
        <li> hello world </li>
        <li> hello world </li>
        <li> hello world </li>
        <li> hello world </li>
        <li> hello jupiter </li>
        <li> hello mars </li>
    </ul>
</div>

Deleting some of those li elements will cause the scroll bar to shrink until it is not needed anymore.

my items was overflowing already and I cannot see some of it, I thought it would affect this div and I have to have same height as its' parent, but reducing height worked. thanks — gpbaculio, Aug 21 '17 at 17:59
@iamnewbie Well, thanks for keeping your example code simple then. Glad we helped. — Jimenemex, Aug 21 '17 at 18:04

score 0 · Answer 3 · answered Aug 21 '17 at 17:48

you set a height of 285 pixels, which is more than enough for three list elements.

if you reduce the height to, say, 50 px or simply add more content inside the div, the scrollbar becomes active.

see https://jsfiddle.net/ppk10zf9/

<div class="list">
<ul>
<li> hello world </li>
<li> hello jupiter </li>
<li> hello mars </li>
<li> hello world </li>
<li> hello jupiter </li>
<li> hello mars </li>
<li> hello world </li>
<li> hello jupiter </li>
<li> hello mars </li>
</ul>
</div>

and

.list {
    margin: auto;
    height: 85px;
    width: 300px;
    overflow-y: scroll;
}

overflow-y: scroll not working, showing style but cannot be scrolled?

3 Answers3

Linked