将子块元素限制为父盒固定边界？

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 auto并且它可以工作。这是我试过的，请检查一下：Link

Answer 2

如果你设置div2 height: 100%并删除它的margin然后解决你的问题。

编辑。