Выравнивание содержимого по низу при использовании flex ⇐ CSS

[Anonymous]

У меня есть базовый макет со статическим верхним и нижним колонтитулом, сдвинутыми вверх и вниз соответственно. Раздел контента посередине заполняет пространство, и для этого раздела имеется полоса прокрутки на случай, если контент слишком велик и не помещается в него.

Заголовок Средний контент Нижний колонтитул html, тело { высота: 100%; переполнение: скрыто; маржа: 0; } #приложение { дисплей: гибкий; гибкое направление: столбец; высота: 100%; переполнение: скрыто; } #header { высота: 60 ​​пикселей; цвет фона: синий; } #footer { высота: 60 ​​пикселей; цвет фона: красный; } #середина { гибкий: 1; переполнение-y: прокрутка; выровнять-элементы: гибкий конец; } jsfiddle здесь.

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

Я пробовал установить поля на 0 и читал о гибком направлении, но ничего из этого не помогло.