Абсолютный позиционированный div внутри позиции: относительное переполнение: scroll div

Question

У нас есть список полей с горизонтальной прокруткой, например:

    

    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">&nbsp;</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>                               
              

Как закрепить div "cover" справа после горизонтальной прокрутки div? На данный момент он застрял в исходном положении, как вы можете видеть на скриншоте:

Answer 1

У меня есть потенциальное решение, но мне нужно было поместить переполнение на <ul>, переместить «крышку» после <ul> и также сделать контейнер display: flex. «Крышка» тогда просто относительно позиционируется назад над <ul>.

Я также добавил background-color, чтобы лучше показать "обложку" для демо.

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>