Home › Forums › CSS › Flexbox: same height + aligned to bottom › Reply To: Flexbox: same height + aligned to bottom
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?