Html CSS仅使用滚动条将容器拉伸到页面宽度以上

我有一个水平滚动的应用程序。当前我将容器的宽度设置为10000px，并使用javascript根据子容器大小调整容器大小。 html的外观如下所示：

<div class=container>
  <div class="stretching-div">
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
  </div>
</div>

由于隐藏的元素等原因，目前这给我带来了一些问题。 因此，我创建了一支代码笔，试图以更好的方式解释我的问题：

有人知道我不使用JavaScript如何实现目标吗。只需使用CSS？

试试你的

拉伸div

。那你的橙色背景就有问题了

空白CSS属性确定如何处理元素中的空白

nowrap像正常情况一样压缩空白，但在源代码中禁止换行（文本换行）

.container{
背景色：红色；
填充：20px；
溢出y：隐藏；
}
.伸展部{
背景颜色：橙色；
填充：20px；
空白：nowrap；
}
.孩子{
显示：内联块；
宽度：100px；
高度：50px；
背景颜色：黄色；
右边距：50px；
}

---

我对您的代码笔做了一些更改，并找到了一个解决方案：

容器div不是必需的（删除它），这里的关键是将这些属性添加到.stretching div：

overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;

最后，您必须将width属性删除为。已用div修复，仅此而已：）

---

希望这对你有用

您是否尝试过使用宽度：100%希望这将帮助您@Sinisa，我认为重点是给

.stretching div

提供与

.fixed width

相同的功能，但不固定宽度。这还不错，但我需要保持原有的边距