Flexbox column align self to bottom

Im trying to use Flexbox. http://css-tricks.com/almanac/properties/a/align-content/ this shows nice alignment options; but i would actually want a Top-top-bottom situation.

I want a div to stick to the bottom of the parent div using flexbox. With flex-direction: column and align-content: Space-between i can do this, but the middle div will align in the center, i want the middle one to be sticked to the top as well.

[top]

[middle]

-

-

-

[bottom]

align-self: flex-end will make it float right, not bottom.

complete flexbox docs: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

I'm a bit late to the party, but might be relevant for others trying to accomplish the same you should be able to do:

margin-top: auto

on the element in question and it should go to the bottom. Should do the trick for firefox, chrome and safari.

Basically, the answer is to give to the last of the middle elements a flex grow 1 code as follows:

.middle-last{
  flex-grow: 1; // assuming none of the other have flex-grow set
}

Thanks, T04435.

I found my own solution, i will add it here for documentation value;

If you give the middle block height: 100% it will take up al the room in the middle. So the bottom block will be at the actual bottom and top and middle are on top.

UPDATE: This doesn't work for Chrome...

UPDATE: Found a way that works for FF/Chrome: setting flex-grow on a higher number (1 is enough) for [middle] will make it take full middle size. more info: http://css-tricks.com/almanac/properties/f/flex-grow/