Flexbox和垂直滚动溢出父级

Question

Flexbox的主要优点是它可以动态填充空白空间。 但是，如果您有一个具有2个子div的flex父级，则this scenario：

<div class="flex-container">
  <div class="flex-item" style="height:100px">100PX</div>
  <div class="flex-item stretch-v">
    <p>Stretches vertically</p>
  </div>
</div>

此方案可以很好地扩展第二个孩子以填充剩余的垂直空间。

问题：

当该子元素充满内容时（向.stretch-v div添加更多<p>标签），子元素的高度会扩大，其父元素也会扩大。

问题：

1. 如何让该子div占用剩余的高度而不会溢出屏幕的高度（并且仍在滚动）？

2. 如果需要应用高度，为什么要使用flexbox？