如何将右边距/填充应用于此水平滚动元素？

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或总宽度来实现您想要的效果.希望有所帮助.