Column auto size not working on Firefox

[holospice18]

Describe the bug

Auto size on Firefox does not work unless 'size' is defined

On Chrome column size is defined by cell content
On Firefox column size is defined by Grid

Chrome

Firefox

[amanmahajan7]

react-data-grid uses auto as the default width. This looks like a bug in FF and not in react-data-grid.

[jcharry]

@amanmahajan7 even if it is a browser bug, any ideas how to work around this? We're currently witnessing the same behavior. I've tried setting min-width: fit-content on the gridcell and column header and that actually seems to fix things on safari and firefox, but then it breaks on chrome.

Update:
Seemingly got this to work by setting min-width: min-content; on gridcell and columheader:

{
  [role='gridcell'] {
    min-width: min-content;
  }
  [role='columnheader'] {
    min-width: min-content;
  }
}

YMMV - I haven't tested this throughly, and it likely has the effect of disallowing a column from ever overflowing, which maybe won't work for all use cases. But for our specific use case of requiring that cell content never overflows it seems to work.

[amanmahajan7]

You can try using <DataGrid defaultColumnOptions={{ width: ''max-content' }} ...