Describe the bug
Using an EuiDataGrid within a <EuiFlexGroup direction='column'> with a sibling component will cause a feedback loop of some kind whereby the DataGrid will grow infinitely.

Impact and severity
A component tree as simple as this completely breaks the entire page (pseudocode):

<EuiFlexGroup direction="column">
  <EuiFlexItem>
    <EuiPanel>
      <EuiSearchBar />
      <EuiDataGrid />
    </EuiPanel>
  </EuiFlexItem>
</EuiFlexGroup>

The fix is to simply specify a height on the Data Grid:

<EuiFlexGroup direction="column">
  <EuiFlexItem>
    <EuiPanel>
      <EuiSearchBar />
-     <EuiDataGrid />
+     <EuiDataGrid height="auto" />
    </EuiPanel>
  </EuiFlexItem>
</EuiFlexGroup>

You could also simply wrap the Data Grid in a non-flex container:

<EuiFlexGroup direction="column">
  <EuiFlexItem>
    <EuiPanel>
      <EuiSearchBar />
+      <div>
          <EuiDataGrid />
+      </div>
    </EuiPanel>
  </EuiFlexItem>
</EuiFlexGroup>

Environment and versions

• EUI version: latest
• React version: latest
• Browser: Chrome (at least)
• Operating System: all

Minimum reproducible sandbox

• Broken version: https://codesandbox.io/p/sandbox/black-glitter-kz96fj?file=%2Fdemo.tsx%3A391%2C1-392%2C1
• Version with height="auto" fix (from @cee-chen): https://codesandbox.io/p/sandbox/blissful-orla-4z88s6?file=%2Fdemo.tsx%3A407%2C17-407%2C88

Additional context
If the bug is "too deep" to fix, as suggested in the thread, it maybe be useful to require a height prop,or at least call this out in the docs. Thanks for your time!