Как убедиться, что цвет фона покрывает всю ширину прокручиваемого элемента, а не только видимую часть? ⇐ CSS

[Anonymous]

У меня есть гибкий контейнер с тремя строками внутри. Весь контейнер прокручивается по горизонтали. (HTML и CSS в скрипке)
Затем я чередую цвет фона (желтый), назначенный строкам. (Чтобы строки чередовались белыми, желтыми, белыми, желтыми и т. д.)
Проблема, с которой я столкнулся, заключается в том, что цвет фона в настоящее время покрывает только ширину видимой области строки. .
Если я прокручиваю строку, цвет фона обрезается и отсутствует в той части, которая изначально была скрыта.
Как это исправить чтобы цвет фона занимал всю ширину строки, даже ту часть, которая не видна на load?
Снимок экрана ниже



Текущий код ниже:

Код: Выделить всё

body {
padding: 100px;
}

.container {
width: 100%;
border: 2px solid red;
border-radius: 30px;
overflow: hidden;
}

.header {
height: 80px;
background-color: #dddddd;
padding: 20px;
}

.footer {
height: 60px;
background-color: #eeeeee;
padding: 20px;
}

.price-list {
display: flex;
flex-direction: column;
overflow-x: scroll;
/* Enable horizontal scrolling */
overflow-y: hidden;
/* Hide vertical overflow */
max-width: 100%;
/* Ensure it doesn't exceed its container */
}

.repeater-item {
display: flex;
flex-direction: row;
width: 100%;
column-gap: 50px;
flex-wrap: nowrap;
padding: 20px;
}

.repeater-item__column {
display: flex;
flex-shrink: 0;
}

/* Now alternate the background colour */
.repeater-item {
background-color: white;
}

.repeater-item:nth-child(even) {
background-color:  yellow;
}

Код: Выделить всё

Header


Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.



Footer




Header


Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.



Footer

JSFiddle

Подробнее здесь: https://stackoverflow.com/questions/793 ... le-element