Fill 100% width of scrolling flex container

Question

I have a horizontally scrolling element (with overflow-x:scroll) with flex containers that contain flex items. I'm trying to apply background to the flex containers.

But as you can see in example below (try scrolling left/right) the background is applied only to visible part of viewport (orange). Is there some way to expand it to full width without having to color each .item?

.list-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background: tomato;
  margin-bottom: 10px;
}
.item {
  flex: 0 0 100px;
  height: 100px;
  margin-right: 10px;
  background-color: skyblue;
  opacity: 0.6;
}
.crop-container {
  width: 300px;
  overflow-x: scroll;
}

.item:first-child {
  margin-left: 10px;
}
.item:last-child {
  margin-right: 10px;
}

<div class='crop-container'>
  <div class='list-container'>
    <div class='item'></div>        
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
  </div>
  <div class='list-container'>
    <div class='item'></div>        
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
  </div>
</div>

@TemaniAfif it doesn't seem to help on my case, can you please check - https://jsfiddle.net/pbL4k98d/ — Marvin3, Jun 17 '19 at 11:11

score 3 · Accepted Answer · answered Jun 17 '19 at 11:17

Here is the updated code with comments:

.list-container {
  /* width:100% Removed to allow element to expand */
  display: inline-flex; /* inline to fit content width */
  /*flex-direction: row;
  flex-wrap: nowrap;  Not needed since it the default behavior */
  background: tomato;
  margin-bottom: 10px;
}
.item {
  width: 100px;  /* Width instead of flex-basis */
  flex-shrink:0; /* Avoid the shrinking*/
  height: 100px;
  margin-right: 10px;
  background-color: skyblue;
  opacity: 0.6;
}
.crop-container {
  width: 300px;
  overflow-x: scroll;
  display: flex;
  flex-direction: column;
  align-items:flex-start; /* Change default alignement to avoid the stretch effect*/
}

.item:first-child {
  margin-left: 10px;
}
/*.item:last-child {
  margin-right: 10px;
} Not needed since all the elements already have margin-right */

<div class='crop-container'>
  <div class='list-container'>
    <div class='item'></div>        
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
  </div>
  <div class='list-container'>
    <div class='item'></div>        
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
  </div>
</div>

Unfortunately that doesn't work with dynamic widths (without `width: 100px` in items). The list container resets its width to the corp container width and tomato background breaks on scrolling. — Ilya Semenov, Apr 26 '22 at 14:18

score 0 · Answer 2 · answered Jun 17 '19 at 11:08

Add overflow-y: hidden to .list-container

.list-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background: tomato;
  margin-bottom: 10px;
  overflow-y: hidden;
}
.item {
  flex: 0 0 100px;
  height: 100px;
  margin-right: 10px;
  background-color: skyblue;
  opacity: 0.6;
}
.crop-container {
  width: 300px;
  /*overflow-x: scroll; */ /*You can get rid of it*/
  
}

.item:first-child {
  margin-left: 10px;
}
.item:last-child {
  margin-right: 10px;
}

<div class='crop-container'>
  <div class='list-container'>
    <div class='item'></div>        
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
  </div>
  <div class='list-container'>
    <div class='item'></div>        
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
  </div>
</div>

Hope it helps. Cheers!

Thanks, but I need a single horizontal scroll pane with two lines, not two scrolls. Your example creates two separate scrollers. — Marvin3, Jun 17 '19 at 11:10

Fill 100% width of scrolling flex container

2 Answers2

Linked