'How to make a scroll bar when overflow in HTML and css

I am having trouble dealing with the scroll bar in CSS When I try to add and scroll bar when the song list container overflow, it will just keep expanding instead of making a bar , i am really confused here is my code

.song-list-container{
    overflow-y: scroll;
}



        <div class="playlist">
            <h2>Playlist</h2>
            <ul class="song-list-container">
                <li data-src="songs/SWEET - I THOUGHT YOU WANTED TO DANCE - Tyler the creator" data-name="SWEET - I THOUGHT YOU WANTED TO DANCE" data-index="0"><span>SWEET - I THOUGHT YOU WANTED TO DANCE </span><span>09:48</span></li>
                <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
                <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
                <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
                <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
                <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
                <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
                <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
                <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
                <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
                <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
                <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
                <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
                <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
                <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
                <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
                <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
                <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
                <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
            </ul>
        </div>
htmlcss


Solution 1:[1]

Add a max-height (any value that fits your need) to the container element and change the overflow-y: setting to auto. That way the scroll bar will only appear if the list is longer than the defined max-height:

.song-list-container {
  overflow-y: auto;
  max-height: 100px;
}
<div class="playlist">
  <h2>Playlist</h2>
  <ul class="song-list-container">
    <li data-src="songs/SWEET - I THOUGHT YOU WANTED TO DANCE - Tyler the creator" data-name="SWEET - I THOUGHT YOU WANTED TO DANCE" data-index="0"><span>SWEET - I THOUGHT YOU WANTED TO DANCE </span><span>09:48</span></li>
    <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
    <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
    <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
    <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
    <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
    <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
    <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
    <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
    <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
    <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
    <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
    <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
    <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
    <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
    <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
    <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
    <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
    <li data-src="songs/Cigarettes - Juice wrld" data-name="Cigarettes - Juice wrld" data-index="0"><span>Cigarettes - Juice wrld  </span><span> 03:47</span></li>
  </ul>
</div>

Solution 2:[2]

Specify a max-height after which the scroll need to implemented

like

.song-list-container{
    overflow-y: scroll;
    max-height: 250px;
}

Solution 3:[3]

Maybe this JSFiddle can help you forward. I've created an example where I used your code and forced the overflow-y on the .playlist. I've added some additional styling to make it clear where I was looking add.

.playlist {
  overflow-y: scroll;
  max-width: auto;
  white-space: nowrap;
}

Solution 4:[4]

.song-list-container{
  white-space: nowrap;
  overflow: auto;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Johannes
Solution 2
Solution 3 N. Hamelink
Solution 4 Pavel Koryakin

Related Questions