100%宽度的Flex容器中，带有水平滚动条的左右间距

Question

我有一个flex容器，它的宽度是100％，带有水平滚动条。我想在滚动时在左右两侧留有空隙，但

元素的margin-right不会在右侧创建空隙。另外，我有另一个包装容器来隐藏带有padding-bottom的滚动条。

我知道在块级容器中可以使用white-space: nowrap，其中margin-right有效，但我想使用flex-box。 我还使用min-width设置了div的width:

此外，我知道在这种情况下，min-width：22％=22vw，但我想使用百分比。

打开jsfiddle代码

body{
  width: 100%;
  height: 10vh;
  margin: 0;
}
div{
    height: 100%;
}
.container{
  width: 100%;
}
.container > div{
  overflow-y: hidden;
  display: flex;
  width: 100%;
}
.container > div > div{
  min-width: 20%;
  display: inline-block;
  margin: 0 5px;
  background: red;
}

- ivaylo

---

我在尝试理解：您是否希望容器内部左右两侧都留有空间？ - kadash

@kadash 当您打开jsfiddle时，您会发现在第一个红色div之前有空白处，但是当您滚动水平滚动条时，最后一个红色div之后没有空白处。 - ivaylo

Answer 1

这里有一个关于margin-right的小技巧，它不会应用在最后一个

上。你可以轻松地添加另一个

，并使其尽可能小，例如0.1px，但如果是0px，它将无效。这将在它们之间留下最后一个

的空白间距，但最后一个

将不可见，因此它会听起来像它的margin已被应用。

body {
  width: 100%;
  height: 40vh;
  margin: 0;
}

div {
  height: 100%;
}

.container {
  width: 100%;
}

.container>div {
  /*overflow-y: hidden;*/
  overflow-x: scroll;
  display: flex;
  width: 100%;
}

.container>div>div {
  min-width: 20%;
  display: inline-block;
  margin: 0 10px;
  background: red;
}

.container>div>div:last-child {
  min-width: 0.1px;
  height: 100%;
}

<div class="container">
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

- Umutambyi Gad

Answer 2

所以，我认为问题在于你的min-width设置。100的20％只能允许5个块没有间距。7个块需要约14％+间距才能有足够的空间。因此，您可以删除min-width，将margin间距转换为比例，并将flex：1添加到.container>div>div中。jsfiddle

- Mister Pea

---

我认为你没有理解我的问题。我想要一个滚动条，而且我希望我的div占视图的20%。滚动条是必需的，我不想让div适应body的宽度，我只想让滚动条在左右两侧有一定的内边距。 - ivaylo

Answer 3

扩展@Gad的答案： 有一个选项可以不在末尾添加附加div。您只需使用伪元素::after/::before，然后添加类似这样的东西。重要的是，带有后伪元素的div需要position: relative。

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

https://jsfiddle.net/0b4tm5y3/4/

- kadash