Bug description

When an EuiTreeView node has many children (enough to exceed the viewport height), collapsing and re-expanding it clips the children at 100vh. Sibling nodes that come after the expanded node overlap with / appear interleaved between the children.

Root cause: The expanded state of .euiTreeView__node applies:

max-block-size: 100vh;

Source: tree_view_item.styles.ts — expanded: css(logicalCSS('max-height', '100vh'))

Steps to reproduce

1. Render an EuiTreeView with a parent node containing 50 children, followed by sibling nodes
2. All nodes are expanded by default (expandByDefault)
3. Collapse the parent node
4. Re-expand the parent node
5. Scroll down
6. Bug: sibling nodes ("Sibling after 1", "Sibling after 2") overlap with children around item 20, and are completely missing from the bottom of the list

Minimal reproduction

import React from 'react';
import { EuiTreeView } from '@elastic/eui';

const childItems = Array.from({ length: 50 }, (_, i) => ({
  id: `child-${i}`,
  label: `Child item ${i}`,
}));

const treeItems = [
  { id: 'sibling-before', label: 'Sibling before' },
  {
    id: 'parent-with-children',
    label: 'Parent with many children',
    children: childItems,
  },
  { id: 'sibling-after-1', label: 'Sibling after (1)' },
  { id: 'sibling-after-2', label: 'Sibling after (2)' },
];

export const Repro = () => (
  <div style={{ width: 300, height: 400, overflow: 'auto', border: '1px solid #ccc' }}>
    <EuiTreeView
      items={treeItems}
      showExpansionArrows
      expandByDefault
      aria-label="Tree with large expanded node"
    />
  </div>
);

Screenshots

1. Initial expanded state (correct — children visible, siblings below scroll):

2. After collapsing the parent (correct — siblings visible below):

3. After re-expanding + scrolling to ~30% (BUG — siblings overlap with children):

4. After re-expanding + scrolling to bottom (BUG — siblings completely missing):

Expected behavior

After collapsing and re-expanding the parent, scrolling should show all 50 children followed by the two "Sibling after" nodes — in correct order, fully visible, with no overlap.

Actual behavior

The expanded <li> is clipped at max-block-size: 100vh. Sibling nodes after the expanded parent overlap with children around the clipping boundary (~item 20) and are completely absent from the bottom of the scrollable area.

Workaround

Override the max-block-size on .euiTreeView__node:

.euiTreeView__node {
  max-block-size: none;
}

Environment

• EUI version: 112.3.0
• Browser: Chrome (reproducible in all browsers)