ResizableTableContainer: Column resize to infinite width when wrapped with display: flex

[jaknas]

Provide a general summary of the issue here

When rendering a ResizableTableContainer which for parent has an element with style display: flex, the columns are expanding in size infinitely if they're not bounded (not using maxWidth).

🤔 Expected Behavior?

Columns most likely should not have this behavior

😯 Current Behavior

Columns are expanding in width infinitely

💁 Possible Solution

workaround: use div with display: block

🔦 Context

Obviously I don't think this is a blocker, but it's something I got surprised by when trying to use ResizableTableContainer.

🖥️ Steps to Reproduce

https://codesandbox.io/s/interesting-curran-lsx537?file=/src/App.js

Version

1.0.0-rc.0

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

MacOS Sonoma

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

So this may sound a little silly, but to work around it you just need a minWidth of 0 on the flexed element, the div which ResizableTableContainer renders. https://codesandbox.io/s/vigilant-architecture-c5qlzt?file=/src/App.js

this is a known flex behavior and there are a bunch of blogs out there which can explain it much better than I can. https://www.bigbinary.com/blog/understanding-the-automatic-minimum-size-of-flex-items#why-is-it-not-shrinking

I'm not sure if we should classify this as a bug or not though. Will need to look into it more. But hopefully this gets you unstuck.

[jaknas]

So this may sound a little silly, but to work around it you just need a minWidth of 0 on the flexed element, the div which ResizableTableContainer renders. codesandbox.io/s/vigilant-architecture-c5qlzt?file=/src/App.js

this is a known flex behavior and there are a bunch of blogs out there which can explain it much better than I can. bigbinary.com/blog/understanding-the-automatic-minimum-size-of-flex-items#why-is-it-not-shrinking

I'm not sure if we should classify this as a bug or not though. Will need to look into it more. But hopefully this gets you unstuck.

👋 @snowystinger, Happy New Year. This issue recently re-surfaced for us, since the workaround provided doesn't work for all cases. While building a design system and exporting the <Table> component, it's not possible to predict if the consumer will be wrapping the component in flex container. The issue becomes the most problematic, when there is more than 1 parent flex container. The consumer needs to remember to add minWidth: 0 to their flex containers when using <Table> component, since it seems there's not much we can do when exporting this component.

I forked the sandbox with a small update showcasing multiple flex container parents

I think it'd be safe to say that the suggested workaround works only in some cases. Do you have any other ideas how this problem could be solved, considered we control only the <Table/> component and not the parent containers? Would this be a good reason to bump the priority of this bug?

(P.S. I noticed that with the workaround, the action of increasing size of viewport causes the Table to fill the remaining viewport size, but with some weird lag (as in: viewport size increased, but it takes 0.5 second for Table to increase its size)

[snowystinger]

Thanks for the update, this certainly seems more like a bug now.