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

March 13, 2022

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>

>Solution :

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>