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> 

Answer 1

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> 

Answer 2

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!