«Все, что осталось» в макете CSS

У меня 4 элемента внутри элемента-контейнера. Высота элемента контейнера будет равна 100% окна браузера. 4 внутренних элемента появятся вертикально наложенными друг на друга (как обычно). Первые два элемента и последний элемент должны иметь «естественную» высоту (т.е. достаточно, чтобы вместить их содержимое). Третий элемент должен расшириться, чтобы заполнить пространство, доступное в контейнере, после того, как остальные 3 съедят все, что им нужно.

Итак, это будет выглядеть примерно так:

Я не могу установить явную высоту для Element-1, Element -2 или Элемент-4, а также высоту Контейнера я не знаю. Я также не знаю естественной высоты Элемента-3; Я планирую использовать overflow-scroll , если он станет больше, чем доступно. Я добавил интервал между элементами для иллюстрации, но между реальными элементами тоже будет интервал (поля / отступы).

Как этого добиться с помощью HTML / CSS? Если для получения достойного макета придется пойти на компромиссы, я их рассмотрю. Бонусные баллы, если техника также применяется по горизонтали (что мне иногда требовалось).