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 >
            <h2>Playlist</h2>
            <ul >
                <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>

CodePudding user response：

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 >
  <h2>Playlist</h2>
  <ul >
    <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>

CodePudding user response：

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

like

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

CodePudding user response：

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;
}

CodePudding user response：

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

CodePudding user response：

This should help.

<dev> isn't an allowed tag. You should replace it with <div>. Also <li> should not be used outside <ul>. If fixed it in the code below.

Btw. overflow-y: scroll; makes the scrollbar only appear when it is needed.

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

<div >
    <h2>Playlist</h2>
    <div >

        <ul >
            <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>
        </ul>
    </div>
</div>