html - 忽略父级的侧边距但尊重垂直滚动条来填充 100% 的视口(viewport)

Question

要求

.Child尽管 .Parent 必须填充 100% 的视口(viewport)有侧垫。

.Parent的侧边距是 提前未知 为 .Child (假设 .Child 是一个可重用的组件，不知道它使用的环境)

滚动条的宽度取决于浏览器，因此它的宽度是 事先未知且无法硬编码 .

.Child长度必须完全可见。

解决方案尝试

.Parent {
  background: #BBDEFB;
  padding: 0 20px;
}

.Child {
  width: 100vw;
  margin-left: calc(-0.5*(100vw - 100%));
  /* Child does not know that `Parent's` paddings are 20px */
  height: 40px;
  background: #FF8F00;
  border: 5px solid #283593;
}

.Dummy {
  height: 1000px;
  background: #E1BEE7;
}

<div class="Parent">
  <div class="Child"></div>
  <div class="Dummy"></div>
</div>

Child的左右边框不可见。
我想原因是滚动条。
我们可以尊重滚动条吗？

Answer 1

这可能无法满足父级具有侧面“填充”的要求。我在这个答案中松散地解释了这一点。
如果您不需要使用“vw”单位，则无需担心滚动条宽度。就我个人而言，由于滚动条和移动浏览器 chrome 的所有潜在问题，我现在认为“100vw”和“100vh”是代码异味。

* {
  box-sizing: border-box;
}

.Parent {
  display: grid;
  grid-template-columns: 20px 1fr 20px;
  background: lightblue;
}

.Child {
  grid-column: 1/-1;
  height: 40px;
  background: orange;
  border: 5px solid #283593;
}

.Dummy {
  grid-column: 2/3;
  height: 200px;
  background: pink;
}

<div class="Parent">
  <div class="Child"></div>
  <div class="Dummy"></div>
</div>