[Data Grid] Data grid overflows in flex box

[walterra]

The data grid will overflow in flex structures:

Within EuiFlexItem, the data grid only adapts to the container width if the flex item has a hard coded width. If the width is not set or a percentage, data grid will outgrow it.

Expected behavior: The data grid should not outgrow the parent container.

---

See this codesandbox to reproduce the issue: https://codesandbox.io/s/euidatagrid-1-6yedq?fontsize=14&hidenavigation=1&theme=dark

---

In this Kibana PoC I worked around it by tracking the width of the parent element and setting it via JavaScript but it's unfortunate that that's needed.

[snide]

You'll need a maxwidth for the EuiFlexItem that contains the grid. EuiDataGrid requires a container with some manner of limits for the scrolling to know when to kick in. Please close if this fixes your issue.

Codesandbox here: https://codesandbox.io/s/euidatagrid-2-flex-width-bug-wxyph

[walterra]

Thanks for the update! In our case the left container has a fixed width and we want the data grid to use up the available rest of the width. So first I thought that's then an edge case we cannot cover with pure CSS. But calc() to the rescue! If I do a max-width: calc(100% - 480px) where 480px is the fixed width of the left container, the data grid uses up the available space. Thanks for investigating, closing this one.