Posicionando el footer con Flexbox

Una forma de posicionar el footer, con Flexbox.

Cómo hacer que el footer esté siempre al fondo de la página, aún cuando el contenido sea mínimo.

Idea

• El container usa display: flex
• flex-direction: column para indicar disponer los elementos verticalmente
• justify-content: space-between para que los elementos se separen hasta ocupar toda el área
• Para que área tenga toda la altura, el html, body y el mismo container tienen height: 100%
• Para indicar la altura de un elemento dentro del flex, se puede usar algo como flex-basis: 50px
• Para indicar que el elemento no se pueda contraer, flex-shrink: 0
• Para indicar que main ocupe toda la altura posible, flex: 1 (por default los demas están en 0)