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?
3 Replies
well i guess with js yes
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
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; for A & C while B would have flex-grow: 2;. That way A & C are 50% wider than B without needing to do exact measurements with JS.
Of course, if you really need it to be max-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.copy that - thanks y'all. And I agree: overkill - I'm cool with the "good nuff" approach given the inconvenience