CSS Column Help

having a brain derp...

I'm looking to have a 3-column box (grid or flex work) - I'll label the columns A, B, and C.
I need both A and C to be the width of max(A's contents, C's contents) and B to be whatever remains.

ie: If C's contents are wider than A's contents, then A should take up more space until it matches C's width, and the reverse.

is such a thing even possible?

glutonium•7/22/23, 8:09 PM

well i guess with js yes

glutonium•7/22/23, 8:11 PM

basically you would take the width of both A and C then the one with the smaller width will be given the width of the greater one

13eck•7/22/23, 8:18 PM

If you don't need it to be exactly the max-content of A or C then you could do some easy flexbox magic to make sure that both A & C are noticeable bigger (but not too much bigger) than B.

I'm thinking flex-grow: 3;flex-grow: 3; for A & C while B would have flex-grow: 2;flex-grow: 2;. That way A & C are 50% wider than B without needing to do exact measurements with JS.

13eck•7/22/23, 8:20 PM

Of course, if you really need it to be max-contentmax-content and no wider then you'll have to use JS…and then some sort of resize-observer to recalculate the widths if/when the viewport changes. Which seems like overkill to me.

ThatRobHumanOP•7/24/23, 3:32 PM

copy that - thanks y'all. And I agree: overkill - I'm cool with the "good nuff" approach given the inconvenience