Flexbox и родительский элемент с вертикальной прокруткой

Question

Основным преимуществом Flexbox является то, что он динамически заполняет пустое пространство. Тем не менее, этот сценарий , если у вас есть гибкий родитель с 2 дочерними элементами:

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

Этот сценарий хорошо работает для расширения второго потомка, чтобы заполнить оставшееся вертикальное пространство.

Проблема:

Когда этот дочерний элемент заполнен содержимым (добавьте больше тегов <p> в div .stretch-v), он увеличивается по высоте, как и его родитель.

Вопрос:

1. Как заставить этот дочерний элемент div занимать оставшуюся высоту, не превышая высоту экрана (и все еще прокручивая)?

2. Если требуется высота, зачем использовать flexbox?