Is there a JavaScript way to equalize columns in a Flexbox layout based on the SHORTER column?

Many of the sites I’ve seen for equal columns on a web page
have to do with making all the columns accommodate the longest column.
How about having equal height columns based on the shorter column?

I’d like to have the left column adjust height based on the height of
the right column, with the overflow set to scroll. The right column
content (consisting of square image buttons) changes based on the width
of the screen and how the elements resize and restack in a responsive
page. You know, you narrow the screen and the column gets smaller, then
suddenly snaps to a new breakpoint and gets longer, then slowly shrinks
until it hits a new breakpoint and gets longer, etc.

I am using Flexbox for this page. At each breakpoint, I manually code
the height of the left div column and set its overflow to scroll. (It’s
just a column of news blocks - click to read the full article.) It’s
clunky, but it works. But it could be more equal across more screen
sizes.

TL;DR:
Is there a JavaScript way to equalize columns in a Flexbox layout based on the SHORTER column? No JQuery, please.

Is this the same question you asked here or do you have different requirements now? I assume the version I gave in that thread was not suitable in some way?

A JS solution would be a bit ‘clunky’ to say the least as it would have to be tied to the resize event so that the height is calculated at every change in pixel width.

1 Like

It is exactly the same question. I could not adjust your CSS code to work with the Flexbox model I had. It will help for me to provide a simplified version of my code. I’ll do that next.

Ugh. I’d have to space every line of text 4 spaces to get it all to appear. Ugh again.

Not sure what you mean. Are you having trouble posting code?

It will be easier to help if we have something like a codepen to work with.

OK, I put it in Codepen here: http://codepen.io/iPhoneDevLog/pen/PNWPbZ

The idea is that the image buttons are the important part. The list of news items of div class=“scroller” should only be as high as the height of the image buttons. There are so many news items in order to accommodate the changing heights of the right side.

I do appreciate your help.

Haven’t really worked out the finer details but the answer is much the same as my original answer.

Seems to do what you want.

Wow! Evidently I did not figure out how to implement it correctly then. This is really terrific! Great work!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.