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>