Absolute positioned div inside position:relative overflow:scroll div - html

Question

We have a list of boxes with horizonal scrolling, like this:
ul {
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
}
li {
display: inline-block;
flex: 0 0 24%;
max-width: 24%;
margin-right: 1.3%;
margin-top: 3px;
height: 140px;
position: relative;
color: #000000;
white-space: normal;
text-align: left;
}
.container {
white-space: nowrap;
background: #fff;
overflow-y: hidden;
overflow-x: scroll;
width: 100%;
position: relative;
height: 160px;
}
.cover {
content: '';
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 100%;
background-color: #ffffff;
z-index: 999;
}
.box {
border: 1px solid #000;
}
<div class="container">
<div class="cover"> </div>
<ul>
<li class="box empty"></li>
<li class="box gradient"></li>
<li class="box gradient"></li>
<li class="box gradient"></li>
<li class="box gradient"></li>
</ul>
</div>
How to make the "cover" div fixed on the right after the div has scrolled horizontally? At the moment it's stuck at the original position, as you can see from this screenshot:

Answer 1

I have a potential solution but I needed to put the overflow onto the <ul>, move the "cover" after the <ul> and make the container display: flex as well. The "cover" is then just relatively positioned back over the <ul>.
I also added a background-color to show the "cover" better for the demo.
ul {
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
position: relative;
width: 100%;
overflow-y: hidden;
overflow-x: scroll;
}
li {
display: inline-block;
flex: 0 0 24%;
max-width: 24%;
margin-right: 1.3%;
margin-top: 3px;
height: 140px;
color: #000000;
white-space: normal;
text-align: left;
}
.container {
white-space: nowrap;
background: #fff;
height: 180px;
background-color: white;
display: flex;
}
.cover {
content: '';
position: relative;
left: -20px;
width: 20px;
height: 150px;
background-color: tomato;
}
.box {
border: 1px solid #000;
}
<div class="container">
<ul>
<li class="box empty"></li>
<li class="box gradient"></li>
<li class="box gradient"></li>
<li class="box gradient"></li>
<li class="box gradient"></li>
</ul>
<div class="cover"></div>
</div>