Flex equal heigh wrapping flex box

#1

Just asking out of curiosity to see if anyone knows a CSS only method to set all flex-box children to the height of the tallest/shortest flex-box child when the flex-box parent is set to wrap. The default seems to be that flex-box children al become the same height of the ROW thy wrap into, but what if the intended look is that all children are the height of the tallest element in the entire flex-box set?

1 Like
#2

No there is no natural method as each row in Flexbox is treated individually and
has no relationship with anything above.

I’m not saying it’s impossible but just can’t think of a way that it could be done :slight_smile:

3 Likes
#3

I didn’t think so either, but. why not tap the experts for confirmation :slight_smile:

1 Like
#4

I can’t think of a way, only to have a fixed height/min-height which is something I don’t like to do plus it’s not the same thing as:-

Which could be fudged with a “magic number” which isn’t ideal.

I wonder if it’s possible with grid. :thinking:
I don’t know grid as well as flex, it’s a while since I looked at it and only got so far learning about it.

1 Like
#5

I don’t think grid can do this either but my grid css is still at basic level.:slight_smile:

You’d probably need to script it.

Or for the most contrived example ever :slight_smile (without fixing the height):

https://codepen.io/paulobrien/pen/arxvKK
( Warning do not use -just for fun :slight_smile:)

2 Likes
#6

I had actually written a script myself ( i will post it later) :). I just always wonder if i missed an all CSS solution.

i think min-flex/max flex, or something like it, would have been a nice feature. :confused:

2 Likes