Reported by @alexmarhaba

Describe the bug

In the flyout system, when a child flyout appears it has a "sliding out" animation. For push type flyouts, during the animation, the child briefly covers / overlays parts of the parent flyout's content. Users have described this as having a "flickering" nature and have found it annoying.

Impact and severity

Environment and versions

Minimum reproducible sandbox

https://eui.elastic.co/pr_9202/storybook/?path=/story/layout-euiflyout-flyout-manager--flyout-child-demo&args=mainFlyoutType:push

To Reproduce

1. Go to the EUI Storybook Layout -> EuiFlyout -> Playground (currently in a feature branch)
2. Change a control: set mainFlyoutType to push
3. Click the "Open child panel" button

Expected behavior

When the flyout type is overlay, the child panel cleanly slides out next to the main flyout, and the same should happen when the flyout type is push.

Screenshots (Optional)

1. Push flyout with child animation, has flickering bug

   01.push.flyout.with.child.animation.flickering.mov

2. Overlay flyout with child animation, does not have flickering bug

   02.overlay.flyout.with.child.animation.no.flickering.mov

Additional context (Optional)

For push type flyouts, during the animation, the child briefly covers / overlays parts of the parent flyout's content

This is true when running directly in EUI, but in Kibana it happens with overlay flyouts as well