Search code examples
htmlcssflexboxcss-selectors

How do make sure background-color covers the entire width of scrollable element, not just the visible part?

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
Testing fiddle bacground only cover the visible part of the scrollable element.

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>

JSFiddle

Solution

  • I would hack it with an overflowing background coloration:

    .repeater-item:nth-child(even) {
  border-image: conic-gradient(yellow 0 0) fill 0//0 9999px;
}

    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:

    body {
  padding: 100px;
}

.container {
  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;
  overflow-y: hidden;
}

.repeater-item {
  display: flex;
  column-gap: 50px;
  padding: 20px;
}

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

.repeater-item:nth-child(even) {
  border-image: conic-gradient(yellow 0 0) fill 0//0 9999px;
}
    <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>