Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Flexbox: same height + aligned to bottom Reply To: Flexbox: same height + aligned to bottom

#237937
grimski
Participant

The IE10 issue was fixed but setting .inner { width: 100%;} also setting box-sizing: border-box; due to the padding.

Very strange! Even though it’s parent element li.h-product has the relevant percentage widths set, because no width was set on .inner it seemed to totally ignore it and break out the box, as wide as it’s content was.

That `<span class=”p-rating” > is swapped out by javascript and replaced with a ‘star rating plug-in, so it won’t make a difference. It is for all intensive purposes a div which can be set to block or inline-block. I’ve changed it to a div now though ;)

http://codepen.io/moy/pen/pgqyxj

So, to finish, if I wanted just one element to align to the bottom, how would I go about that? I actually want to align both .p-rating and .value to the bottom of their parent (.inner). I’m guessing I would need to wrap both in a div?

Thanks for all the help so far! :)

** EDIT **

I’m actually having the same issue here (maybe a bit easier to follow):

http://codepen.io/moy/pen/NxeMqg

The .just-short block needs to align to the bottom of the column but the rest of the content should remain at the top, so I’ve overwritten align-content: stretch; with align-content: flex-start but now I don’t know how to get the one item to align differently – can I?