限制子块元素到父框固定边界？

Question

这已经成为我这边的严重刺，可以用另一双眼睛。

场景如摘要所示，其中div1和div2应该遵守div0的边界，但是似乎div2（红色轮廓）不遵守我希望包含它的父对象的边界并调用溢出滚动。

问题示例；

div { box-sizing: border-box; }

#div0 {
  position: fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  border: lime 5px solid;
}

#div1 {
  border: blue 2px dashed;
  height: 100%;
  width: 100%;
}

#div2 {
  margin: .75rem;
  padding: 1rem;
  border: red 15px solid;
  background-color: rgba(244, 66, 66, .3);
  overflow: auto;
}

<div id="div0">
  <div id="div1">
    <div id="div2">
      <p>Where</p>
      <p>is</p>
      <p>the</p>
      <p>scroll</p>
      <p>bar?</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>

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

Answer 1

将div2设置为与父级相同的高度，然后在子容器上设置overflow-y自动，这样就可以了。这是我尝试的方法，请检查以下内容：Link

Answer 2

如果将div2设置为height: 100%并删除其margin，那么就可以解决您的问题。

已编辑。