[EuiSelectable] `height=full` inside flyout with EuiFlyoutBody

[acstll]

It's possible to render EuiSelectable inside EuiFlyout. There's this example in the docs that shows it.

In the example EuiFlyoutHeader and EuiFlyoutFooter are used, but not EuiFlyoutBody, because it will make the list element have a height of 0. The combination of height="full" in EuiSelectable (the list being virtualized) with the inner container in the flyout body not having display: flex, breaks the layout.

We should check whether other virtualized content has the same issue while being rendered inside EuiFlyoutBody, and determine the scope of a possible fix, whether it'd be in the Selectable or the Flyout, or any other component. For example, a possible fix could be adding a fullHeight prop to EuiFlyoutBody…

Impact and severity

Low. Easy workaround available and a bit edge-casey.

Minimum reproducible sandbox

The codesandbox below has a EuiSelectable inside EuiFlyout, because the list is rendered inside EuiFlyoutBody, its height becomes 0.

https://codesandbox.io/p/sandbox/romantic-microservice-s7pg3c

A suggested workaround could be adding some custom styles to EuiFlyoutBody:

<EuiFlyoutBody
  css={css`
    .euiFlyoutBody__overflowContent {
      display: flex;
      height: 100%;
    }
  `}
>
  {list}
</EuiFlyoutBody>

Expected behavior

To be able to wrap EuiSelectable's list inside EuiFlyoutBody.

Screenshots