Position item at bottom of div

[grimski]

I’ve tried doing this with Flexbox but I can’t seem to get it to work. Maybe I need to wrap everything that isn’t to be position to the bottom of it’s container in a div? …but I’d rather not do that if it can be avoided.

Here’s my CodePen example: http://codepen.io/moy/pen/vXKKOB

Note: I’ve just set flex-end so you can see which item I’m trying to position to the bottom of the div. It’s should be aligned to the left like the rest of the text really.

I’ve also set a height on the table as well as background colours on the 2 columns just to prove/show that the div grows in height when the content is uneven so Flexbox is working.

Would I need to make the .progress div fill the rest of the available space? I was hoping to avoid this and just have the last line of text independently positioned to the very bottom of the div. Though I understand if that’s not possible!

Thanks, hope someone can help!

[Atelierbram]

Try margin-top: auto;

.icon--info {
  /* stuff */
  margin-top: auto;
}

[ZachDonald]

Try this

margin-top: auto;

It may work

[grimski]

Thanks @Atelierbram and @ZachDonald, that looks like it did the trick!

Cool little trick, I was thinking it had to be some sort of ‘flex’ related declaration. That’s going to come in handy!

[Author]

Posts