Question posted in 
I’ve got a flex container with 3 rows inside. The entire container is horizontally scrollable. (HTML & CSS in the fiddle)
I am then alternating the background colour (yellow) assigned to the rows. (So that the rows alternate white, yellow, white, yellow etc.)
The issue I’m having is that the background colour currently only covers the width of the visible area of the row.
If I scroll the row, the background colour is cut off and missing from the part that was initially hidden.
How do I fix this so that the background colour takes the entire width of the row, even the part that is not visible on load?
Screenshot below
Current code below:
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;
}<div class="container">
<div class="header">
<h2>Header</h2>
</div>
<div class="price-list">
<div class="repeater-item">
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="repeater-item">
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="repeater-item">
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="footer">
<h3>Footer</h3>
</div>
</div>
<div class="container">
<div class="header">
<h2>Header</h2>
</div>
<div class="price-list">
<div class="repeater-item">
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="repeater-item">
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="repeater-item">
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="repeater-item__column">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="footer">
<h3>Footer</h3>
</div>
</div>
2
Answers
I would hack it with an overflowing background coloration:
More detail from my article: https://css-tip.com/overflowing-background/
I also simplified some of the CSS but it’s irrelevant to the solution:
Try to add nominal width: to the repeater-item, ex. 1000px
By default the browser will render only the visible part.