（margin / padding）-right不会为溢出容器创建空间

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我预计当我滚动到最后（右）

时会出现橙色

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，您只需添加滚动条即可看到溢出的部分，并且您不会将填充视为例外：

.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>

与保证金权利相同的逻辑。当元素溢出时，没有空间在内部元素和父元素之间添加边距。

Answer 2

我已经签入了Mozilla Firefox。它工作正常。

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

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

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

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

Answer 3

你应该在CSS下面使用。它为我工作。

min-height: 0;
min-width: 0;