elastic/eui

[EuiDataGrid] Grids wrapped in a container with no set height & `defaultHeight: 'auto'` will render with 0 height in webkit browsers

cee-chen opened this issue · 0 comments

To Reproduce

  1. Open data_grid_row_heights.stories.tsx, and delete the following line:
    height={419} // Required by webkit browsers to not render with 0 height. TODO: Investigate why, this is likely a bug
  2. yarn storybook
  3. Go to http://localhost:6006/?path=/story/tabular-content-euidatagrid-rowheightsoptions-prop--auto in a non-Firefox browser
  4. The datagrid will render with a 0 body height:
    Image
  5. Compare to Firefox, where the datagrid renders as expected:
    Image

Expected behavior
The datagrid should be able to render with an auto/self-set height without needing a height specified or its parent container to have a specified height.

Minimum reproducible sandbox
Use our Storybook instead for easier repro

Additional context
There are several issues around EuiDataGrid and how it tries to "adapt" its height from its parent container. See also: