Contextually aware equal height rows flexbox

[h0rhay]

Is there a way to achieve this?

I’ve been playing with CSS Tricks original article on this here:
https://css-tricks.com/boxes-fill-height-dont-squish/

Trying to make Row Three (or all rows) equal height in both columns here:
https://codepen.io/h0rhay/pen/EEJLPp

Wondering if its possible without resorting to JS?

What d’yall think :)

[Mamun]

Did you want something like this?

https://codepen.io/kh-mamun/pen/zWXaKO

I used grid here. I think you can do it with flexbox also.

[h0rhay]

Nice job @kh-mamun .. kind of looking for a flexbox solution, but not sure its possible with flexbox?

[Paulie_D]

No, this is not possible in flexbox given the structure you have (vertical columns).

Flexbox (and pretty much any other layout method) does not have any method of equalising heights between elements that do not share a common parent.

[Omwati6229]

It is nice may calendar 2018
 http://may2018calendar.net

[Pogany]

Is it possible to change your HTML or it has to stay as it is?

[h0rhay]

We could change markup..

The goal is to have a grid of tiles that are always the same height (depending on the content), and each internal row on each tile aligns up horizontally.

[Mamun]

It’s flex based. See if it server the purpose.

https://codepen.io/kh-mamun/pen/QmPZaJ

[h0rhay]

I like it @kh-mamun, but we still need to markup our tiles as individual tiles due to react architecture.
Nice solution though :)

Re: the initial problem.. still not sure its solvable with flex

[Mamun]

I think I didn’t understand your problem. What is the actual problem? I thought you wanted rows to be equal height. Can you explain what is the problem and what solution are you looking for? This can be achieved with few other ways I guess. I might not be able to solve it but at least let me know with detailed explanation. Let’s try it…

[h0rhay]

From above:

The goal is to have a grid of tiles that are always the same height (depending on the content), and each internal row on each tile aligns up horizontally.

So we have the markup as in the original pen.. each tile is wrapped in its own wrapping div or li, the probelem comes when trying to align items horizontally, and the tiles should be ‘contextually’ aware of the one next to it, so that the rows are aligned, no matter what the content.

Thanks for the interest :)

The only solution we have arrived at, is to have fixed item content pinned to the top and or bottom, and then let items in the middle flex-grow.

[Mamun]

If each tile has it’s own wrapper div then you can’t relate left elements with right elements only with css. You need javascript for that. CSS is not that strong yet.

[h0rhay]

Yep, thats the conclusion we came to.
Was hoping flexbox might be a solution but yes only JS or Grid can accomplish it.
Thanks for looking into it :)

[Author]

Posts