html - 具有水平滚动的 100% 宽度 flex 容器中的左右空间

Question

我有一个宽度为 100% 且带有水平滚动条的 flex 容器。我想在滚动条的左右两侧留出空间，但是 div 的 margin-right 不会在右侧创建空间，我还有另一个容器包装容器以隐藏滚动条填充底部。

我知道我可以在 margin-right 工作的 block 容器中使用 white-space: nowrap，但我想使用 flex-box 。此外，我将 div 的 width 设置为 min-width:

我也知道在这种情况下 min-width: 22% = 22vw，但我想用百分比来做。 jsfiddle code open

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;
}

Answer 1

这是关于 margin-right 的小技巧，它没有应用在最后一个 div 上，你可以轻松添加另一个 div 并使其尽可能小，例如 0.1px 但如果它是 0px 它将不起作用，这将使最后一个 div 在它们之间留有空间，但最后一个 div 将不可见，因此听起来像是它的 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>