Как получить резиновый блок посередине?

Заготовка для примера
jsfiddle

Хочется получить средний блок, который занимает всё оставшееся место между первым и вторым при условии, что размер родителя фиксированный. Свойство
height: 100%заставляет нижний блок выпадать из контекста — как быть?

UPD:
Если добавить родителю

display: flex
flex-direction: column

а среднему блоку
flex: 1то, вроде, проблема решается, но тогда у меня ещё два вопроса:
- почему это заработало?
- это похоже на какой-то хак, так ли это или всё ок?
jsfiddle