Переполнение-у: прокрутка не работает, текст выходит из div

Question

Итак, это должно было быть легкой частью сайта, но я столкнулся с проблемой, что команда overflow-y:scroll, к сожалению, не сработала, и текст песни покидает div.

#cover{
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:5;
    width:100%;
    height:100%;
    display:none;
}
#albumsongs{
	background-color:black;
	opacity:2;
    height:90%;
    width:70%;
    
    position:absolute;
	top:5%;
	left:10%;
    z-index:10;
    display:block;
	border:5px solid #cccccc;
	border-radius:10px;
}
#albumsongs:target, #albumsongs:target + #cover{
    display:block;
    opacity:2;
}
.cancel{
    display:block;
    position:absolute;
    top:3px;
    right:2px;
    background:rgb(245,245,245);
    color:black;
    height:30px;
    width:35px;
    font-size:30px;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
}
#lyrics{
	overflow-y:scroll;
	height:100%;
	width:45%;
	border:1px solid red;
}

#playbutton{
	height:40px;
	width:100px;
	position:absolute;
	top:2%;
	left:5%;
	padding-right:300px;
	border-radius:200px;
	outline:none;
	border:none;
	background-color:#698aad;
}
#playimage{
	cursor:pointer;
	margin-top:-1px;
	margin-left:-7px;
	height:40px;
	width:40px;
}
#songtitle{
	
	color:#ffc31a;
	font-size:25px;
	position:absolute;
	top:15%;
	left:35.5%;
}


#starslyrics{
	font-size:22px;
	color:red;
	position:absolute;
	top:3%;
	right:40%;
	
}
#starslyrics:hover{
	border-radius:5px;
	border:none;
	cursor:pointer;
	background-color:red;
	color:white;
}
#showstarslyrics{
	display:block;
	position:absolute;
	left:12%;
	color:red;
}
#unleashedsonglist{
	overflow-y:scroll;
	height:100%;
	width:55%;
	border:1px solid blue;
	position:absolute;
	right:0;
	top:0;
}

<div id="albumsongs">
<div id="lyrics">
<p id="showstarslyrics">
You spoke a word and life began<br>
Told oceans where to start and where to end<br>
You set in motion time and space<br>
But still you come and you call to me by name<br>
Still you come and you call to me by name<br><br>

If you can hold the stars in place<br>
You can hold my heart the same<br>
Whenever I fall away<br>
Whenever I start to break<br>
So here I am, lifting up my heart<br>
To the one who holds the stars<br><br>

The deepest depths, the darkest nights<br>
Can't separate, can't keep me from your sight<br>
I get so lost, forget my way<br>
But still you love and you don't forget my name<br><br>

If you can hold the stars in place<br>
You can hold my heart the same<br>
Whenever I fall away<br>
Whenever I start to break<br>
So here I am, lifting up my heart<br>
If you can calm the raging sea<br>
You can calm the storm in me<br>
You're never too far away<br>
You never show up too late<br>
So here I am, lifting up my heart<br>
To the one who holds the stars<br><br>

Your love has called my name<br>
What do I have to fear?<br>
What do I have to fear?<br>
Your love has called my name<br><br>
What do I have to fear?<br>
What do I have to fear?<br>

If you can hold the stars in place<br>
You can hold my heart the same<br>
Whenever I fall away<br>
Whenever I start to break<br>
So here I am, lifting up my heart<br>
(Lifting up my heart)<br>
If you can calm the raging sea<br>
You can calm the storm in me<br>
You're never too far away<br>
You never show up too late<br>
So here I am, lifting up my heart<br>
To the one who holds the stars<br><br>

You're the one who holds the stars

</p>









</div>



<div id="unleashedsonglist">
<button id="playbutton"><img title="Play/pause music" id="playimage" onclick="play()"src="play3.png"/><span id="songtitle">Skillet-Stars</span></button>
<span onclick="showstarslyrics()" id="starslyrics">Lyrics</span>










</div>








    <a href="#" class="cancel">&times;</a>
</div>
<div id="cover" >
</div>

JSFiddle demo (если вам нужны и другие коды, просто дайте мне знать в комментарии)

И здесь вы также можете увидеть проблему на картинке, что текст выходит из div, и я не мог понять, почему.

Может ли кто-нибудь помочь мне? Что мне не хватает? Спасибо за любую помощь!

Answer 1

Применить position: relative к #lyrics. Это решит вашу проблему. Ваш переполненный контент позиционируется абсолютно на теле, а не на его родителя.

Answer 2

Не используйте для этого абсолютное позиционирование. Абсолютное положениеg полностью выводит div из потока. Вместо этого используйте относительный:

#showstarslyrics {
display: block;
position: relative;
left: 12%;
color: red }

Answer 3

вам нужно удалить абсолютную форму позиции #showstarslyrics fiddle

#showstarslyrics{
    display:block;
    color:red;
}

Answer 4

В #showstarslyrics вы должны использовать position: relative, а не absolute:

#showstarslyrics{
    display:block;
    position:relative;
    left:12%;
    color:red;
}

Обновлено JSFiddle