CSS overflow Property has different behaviour in Firefox only - html

Question

I have a playlist as overlay for videos which should be scrollable.
.playlist{
height: 150px;
overflow-y: scroll;
border: 3px solid red;
}
.playlist li:before {
content: " ";
display: block;
height: 50px;
border: 1px solid #000;
}
.playlist li {
height: 50px;
}
.playlist li span {
display: block;
height: 50px;
position: relative;
top: -50px;
left: 10px;
}
A jsfiddle example of the situation here: http://jsfiddle.net/41unLxwk/4/
I use :before selector to display play- and pause buttons and the text is positioned relative. In this scenario there will be blank space in the end (only in firefox).
I know this does not happen if you do not use :before and relative positioning, but maybe there is another way to fix this.
edit: To clarify, the problem is that in firefox there is too much overflow-y in this example. I am not talking about the x-axis.

Answer 1

The problem is that the offset of relative positioned elements doesn't affect the other elements, so you see the space that where span would be if you didn't move them.
You can fix it adding
.playlist > ul {
overflow: hidden;
}
.playlist {
height: 150px;
overflow-y: scroll;
border: 3px solid red;
}
.playlist ul {
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
}
.playlist li:before {
content: " ";
display: block;
height: 50px;
border: 1px solid #000;
}
.playlist li:not(:first-child):before {
border-top: none;
}
.playlist li {
height: 50px;
}
.playlist li span {
display: block;
height: 50px;
position: relative;
top: -50px;
left: 10px;
}
<div class="playlist">
<ul>
<li>
<span>Song_1</span>
</li>
<li>
<span>Song_2</span>
</li>
<li>
<span>Song_3</span>
</li>
<li>
<span>Song_4</span>
</li>
<li>
<span>Song_5</span>
</li>
</ul>
</div>
However, consider something simpler like
.playlist > ul > li {
height: 50px;
border: 1px solid #000;
margin-top: -1px;
}
.playlist > ul > li:last-child {
border-bottom: none;
}
.playlist {
height: 150px;
overflow-y: scroll;
border: 3px solid red;
}
.playlist > ul {
list-style: none;
padding: 0;
margin: 0;
}
.playlist > ul > li {
height: 50px;
border: 1px solid #000;
margin-top: -1px;
}
.playlist > ul > li:last-child {
border-bottom: none;
}
<div class="playlist">
<ul>
<li>Song_1</li>
<li>Song_2</li>
<li>Song_3</li>
<li>Song_4</li>
<li>Song_5</li>
</ul>
</div>