填充滚动 Flex 容器的 100% 宽度

Question

我有一个水平滚动元素（带有overflow-x:scroll），其中包含包含弹性项目的弹性容器。我正在尝试将背景应用于柔性容器。

但正如您在下面的示例中看到的（尝试向左/向右滚动），背景仅应用于视口的可见部分（橙色）。有没有什么方法可以将其扩展到全宽，而不必为每个颜色着色.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

这是带有注释的更新代码：

.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>