如何对这个水平滚动元素应用右边距/填充？

Question

我有一个水平滚动的div，其左右填充为100px。左填充似乎工作正常。但是，右侧不可见。而且，最后一部分的50px右边距也丢失了。

我想念什么？为什么不同时注意正确的填充和边距？

body {
  margin: 0;
}

div {
  width: 100vw;
  display: flex;
  overflow: auto;
  padding: 0 100px;
  box-sizing: border-box;
}

section {
  flex: 0 0 auto;
  width: 300px;
  margin: 0 15px;
  height: 300px;
  background: red;
}

<div>
  <section></section>
  <section></section>
  <section></section>
</div>

更新

根据@chaitanya swami的建议，以下是一种解决方法。我仍然想知道为什么上面的方法不能按预期工作。

body {
  margin: 0;
}

#wrapper {
  width: 100vw;
  overflow: auto;
}


#carousel {
  display: flex;
  padding: 0 100px;
  width: calc(100vw + 400px);
}

.slide {
  flex: 0 0 auto;
  width: 300px;
  margin: 0 15px;
  height: 300px;
  background: red;
}

<div id="wrapper">
  <div id="carousel">
    <section class="slide"></section>
    <section class="slide"></section>
    <section class="slide"></section>
  </div>
</div>

Answer 1

为此，您需要一个父div。您将需要定义父div的宽度，当前为100vw。 您可以通过将宽度设置为900px或总宽度来实现所需的功能。 希望有帮助。

Answer 2

您也可以将CSS用于此类

<div>
  <section></section>
  <section></section>
  <section></section>
</div>

<style>
 body {
  margin: 0;
}

div {
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  overflow: auto;
  padding: 0 100px;
  box-sizing: border-box;
}

section {
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 300px;
  margin: 0 15px;
  height: 300px;
  background: red;
}
</style>

Answer 3

不添加其他几个子代，您的选择将受到限制。

首先是不包含其他HTML个子级的解决方案。

1. 从父级中删除flex。
2. 从父级移除外部padding规则。
3. 将white-space: nowrap添加到父级。
4. 将子节设为inline-block。
5. 为了处理多余的间隙空间（症状为inline-block），请将父级的font-size设置为0，并将其在子元素中恢复为基本字体大小
6. 分别向第一个/最后一个孩子添加左/右页边距100px。

为了使CSS更加井井有条，我采取的第一步是将100px外部间距分配给本地CSS变量，因为该值在多个地方使用。我认为这有助于使代码更具可读性。

:root {
  --outer-spacing: 100px;
}

body {
  margin: 0;
}

div {
  width: 100vw;
  overflow: auto;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: 0;           /* Prevent unwanted inline-block gap spacing */
}

section {
  font-size: 16px;        /* Restore base font size */
  width: 300px;
  margin: 0 15px;
  height: 300px;
  max-height: 100vh;
  background: red;
  display: inline-block;
}

section:first-of-type {
  margin-left: var(--outer-spacing);
}

section:last-of-type {
  margin-right: var(--outer-spacing);
}

<div>
  <section></section>
  <section></section>
  <section></section>
</div>

http://jsfiddle.net/oxdbpq62/3/

最后，是一个更简单的解决方案，但在原始子代之前和之后添加了span。注意：我删除了显式宽度，并将其添加到flex-basis插槽中的每个简写flex声明中。

body {
  margin: 0;
}

div {
  width: 100vw;
  display: flex;
  overflow: auto;
  box-sizing: border-box;
}

.gutter {
  flex: 0 0 100px;
}

section {
  flex: 0 0 300px;
  max-height: 100vh;
  margin: 0 15px;
  height: 300px;
  background: red;
}

<div>
  <span class="gutter"></span>
  <section></section>
  <section></section>
  <section></section>
  <span class="gutter"></span>
</div>

http://jsfiddle.net/jw0qz2t3/