Html 100%宽度柔性容器中左右两侧的空间，带有水平滚动

我有一个flex容器，宽度为

100%

，带有水平滚动条。我希望在滚动条的左侧和右侧有空间，但是divs的

margin right

不会在右侧创建空间，而且我还有另一个容器包装该容器以隐藏底部填充的滚动条

我知道我可以在块容器中使用

空白：nowrap

，其中

右边距

起作用，但我想使用

弹性框

。此外，我正在使用

min width

设置divs'

width

：

我也知道在这种情况下，

minwidth:22%=22vw

，但我想用percange来做。

---

因此，我认为问题在于您的

minwidth

设置。100的20%只允许5个区块没有间距。7个街区的间距需要达到14%+才能留出足够的空间。因此，您可以取出

最小宽度

，将

边距

间距转换成一定比例，并将

flex:1

添加到

.container>div>div

这里是关于

右边距
的小技巧，它没有应用到您可以使用的最后一个div上
轻松添加另一个
div
并使其尽可能小，例如
0.1px
，但如果它是
0px
，它将不起作用，这将使最后一个div在它们之间留有空间，但最后一个
div
将不可见，因此听起来像是应用了
边距


正文{
宽度：100%；
高度：40vh；
保证金：0；
}
div{
身高：100%；
}
.集装箱{
宽度：100%；
}
.container>div{
/*溢出y：隐藏*/
溢出-x：滚动；
显示器：flex；
宽度：100%；
}
.container>div>div{
最小宽度：20%；
显示：内联块；
利润率：0.10px；
背景：红色；
}
.container>div>div:最后一个子项{
最小宽度：0.1px；
身高：100%；
}

扩展@Gad答案：
可以选择不在末尾添加其他div。您可以只使用伪元素：：after/：：before，然后添加如下内容。需要注意的是，then div with after伪元素需要是position:relative

.container>div>div:last-child::after {
  content: " ";
    width: 25px;
    height: 100%;
    position: absolute;
    right: -25px;
}

我在试图理解：您想在容器的左右两侧留出空间吗？@kadash当您打开JSFIDLE时，您可以看到在第一个红色div之前有空白，但是当你滚动水平卷轴时，在最后一个红色分区之后没有空格。我想你还没有理解我的问题，我想要一个卷轴，我想要我的分区占视图的20%。卷轴的目的是我不想在身体的宽度适合的div唯一我想要的是卷轴有左边和右边的填充。
.container>div>div:last-child::after {
  content: " ";
    width: 25px;
    height: 100%;
    position: absolute;
    right: -25px;
}