Flexbox: same height + aligned to bottom

[grimski]

Sure I’m missing something pretty simple here.

Basically I have 2 divs, side-by-side and more often than not they’ll have different heights. The content should be aligned to the bottom (done). But one of the divs has a border which I’d like the stretch to the top of both divs. So essentially I need to make both divs the same size, which I thought could be achieved with stretch?

http://codepen.io/anon/pen/QyJWem

[Paulie_D]

The original align-items on the parent was overriding the stretch default so the columns were no longer the same height.

So, leave theparent as stretch (the default) and make the children flex-containers, with column direction and align their content to the end

http://codepen.io/Paulie-D/pen/jWQWbp

[grimski]

Thanks @Paulie_D, that’s great!

I have another layout (product index), where I’m trying to make all the items an equal height with flexbox. I’m pretty much there but the image within is getting squashed rather than keeping it’s aspect ratio, have you encountered this before?

The markup would be:

<ul class="products">
<li class="h-product">
<a class="inner">
<img src="" class="u-photo" />
<h2 class="p-name">Name of item</h2>
<p class="e-description">Serves 4-5 people</p>
<span class="p-rating" value="4">Rating: 4 out of 5</span>
<p class="value"><del>£7.99</del> <data class="p-price" value="6.95">£6.95</data></p>
</a>
</li>
</ul>

The background colour/image is set on the anchor, due to the complexity of the design it has to be that way. So the anchor needs to stretch the height of the list-item as well. I’ll bang it in a CodePen when I get a moment if needed.

Thanks again!

[Paulie_D]

Codepen would be preferred….plus any differences between browsers (if any).

[grimski]

It should display the same in all browsers really. I guess Flex won’t work in IE9(?) and below but I can accept the boxes won’t be even heights and just target an nth-child and set clear: left;

Here’s the CodePen:
http://codepen.io/anon/pen/jWQRxe

I’ve not got the code to hand but the mark-up and layout I’ve created is sound, I’ve even added the media queries as the widths of each list-item chance in different screen widths. Shouldn’t be many differences between this and the actually code bar fonts/sizes/colours etc but everything is consistent on each h-product. except the length of headings/paragraph.

[gcyrillus]

if you go for flex, then you can imbricate them:
you may use wrap, column, … , and flex:1; where you want a single element to fill whole space avalaible:
https://codepen.io/gc-nomade/pen/obQRRM

[grimski]

Thanks, that achieves the layout I’m after for the boxes!

Is there a way to prevent the items (h2, p) stacking in the content? The rating and price are meant to be inline with each other, one floated left and the other right. If that’s not possible I guess I could wrap them in a div – but I’m rather avoid that!

Also, this makes the image stretch which is another issue I was describing, anyone have any ideas on how to prevent this? I’ve also encountered it in the website header when trying to vertical centre the logo (wrapped in an anchor) – it stretches it height-wise.

[gcyrillus]

I see , chrome in action !! forgot about this

To avoid image to be shrinking do not let them be child of flex elements.

for the rest not sure i understood and what is the final behavior expected. did you need to see some flex element to be wrapping ?

again, i rewrapped here some elements, you should not have p and span side by side :)

https://codepen.io/gc-nomade/pen/adPvvq

[grimski]

Ah ok, that’s a strange on, interesting it’s just Chrome then!

The rest of the query, was just I noticed that all the elements were as wide as the container, caused by flex. I needed to last 2 (rating and price), inline with each other. So rating was floated left and price to the right but this was cancelled out by flex.

I can see you’ve solved this by adding a parent div around them – is this the only way? I suppose that will be required anyways if they’re meant to be aligned to the bottom of the container?

[grimski]

I’ve made some progress here: http://codepen.io/moy/pen/pgqyxj

I think my mistake was targeting the .inner anchor with flex. I’ve tried again and this has solved the first part of the problem (maybe this will make it clearer).

The next part is; I’d like the rating + price to be positioned at the bottom (flex-end?) If tried using align-self but it doesn’t seem to work and is overwritten by the parent. If needed, I could wrap these 2 items in a ‘footer’ div or something.

Thanks, nearly there I think!

** EDIT **

Although I’ve just looked in IE10 and it looks like the percentage widths aren’t honoured and the images break out of their containers? Should this work in IE10? Fine in 11!

[gcyrillus]

Hi,

if you want to support older browser, you should really mind the markup, the data tag doesn’t exist for instance , inline-tags and block-tags are not meant to be sibblings, value is not a valid attribute for span but data-value would be in HTML5, …

You should rethink a little bit your markup, style will be easier to apply on a valid and efficient structure i believe :) .

for flexbox and support : http://caniuse.com/#search=flex

[grimski]

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?

[Author]

Posts