html - (margin/padding)-right 不为溢出容器创建空间

Question

由于某种原因，在溢出的容器中，右侧的填充没有显示。

.parent {
  background-color: orange;
  width: 150px;
  height: 50px;
  overflow: auto; 
  padding-right: 15px;
}

.child {
  background-color: blue;
  width: 250px;
  height: 100%;
  margin: 0 10px;
}

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

<div class="parent">
  <div class="child">
  </div>
</div>

当我滚动到最后(右)时，我预计橙色会出现

Answer 1

让我们先不应用任何 overflow 属性。我们显然在它的父容器之外有元素(添加容器的填充将保留在里面):

.parent {
  background-color: orange;
  width: 150px;
  height: 100px;
  padding:15px;
}

.child {
  background-color: blue;
  width: 250px;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

<div class="parent">
  <div class="child">
  </div>
</div>

现在通过添加 overflow:scroll 或 overflow:auto 你将简单地添加滚动来查看溢出部分并且你不会有异常(exception)的填充:

.parent {
  background-color: orange;
  width: 150px;
  height: 100px;
  overflow:auto;
  padding:15px;
}

.child {
  background-color: blue;
  width: 250px;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

<div class="parent">
  <div class="child">
  </div>
</div>

与 margin right 相同的逻辑。当元素溢出时，内部元素和父元素之间没有空间添加边距。