Как сделать поочередное сжатие/скрытие CSS flex?

Question

[grabbee]

Изначально на экране 3 блока в колонку. Нижний не сжимается вообще. Верхний должен сжаться до нуля. После этого должен начать сжиматься средний блок. Это если менять размер высоты экрана. Верхний и средний блоки большие, приблизительно одинакового размера. Нижний самый маленький

Я пробовал разную вложенность. Большие блоки должны скроллиться по мере сжатия. Почти всё получилось, только синий блок не хочет сжиматься.

картинка