Pin item to bottom of container

In laying out the items of a container, I want an item to be pinned to the bottom no matter the size of the other content. I can do that with a mix of flex and margin: auto.

.container {
  display: flex;
  flex-flow: column;
}

.footer {
  margin-top: auto;
}

I had previously thought that flex box was more contained and wouldn't change the behaviour of properties like margin: auto but it does!

Check out my codepen here.

H/T Vidal Ekechuckwu

Tweet