Problem Statement

For a simpler starting point, the MVP of the parent+child (aka grouped) flyout only supports the following (parent size, child size) combinations:

• S, M
• S, S
• M, S

We know that flyouts in the new system will need to contain 'tools' like a trace waterfall and graphs like the Analyzer and Session viewer.
With the current setup of flyout sizes S, M, L maps to 25vw, 50vw, 75vw with a max of 90vw. Keeping custom sizes aside, one can see that L + S exceeds the maximum (100vw > 90vw).

Proposed Solution

There are several ways this can be addressed and they are not mutually exclusive.

TL;DR - I believe a fill + maxWidth setup may get us 80% of what we need.

Possible solutions:

1. Add support for L but limit it to 65vw
2. Add support for fill and allow it to take up the remaining space, up to 90vw
3. Add support for custom sizes and handle overall max via code
4. More...

[1] and [2] produce the same result but, imo, [2] is more clear on what is happening.
[3] will likely need to be done, but it could come later and it would work with fill

To control the size of fill, we can bubble up the maxWidth prop that exists on EuiFlyout. In this way, implementors can limit a fill flyout from becoming excessively wide on large viewports.

Use Case

• I want to display a 'tool' (trace waterfall, graph like Analyzer or Session viewer) in a flyout and M is too narrow.
• I set the flyout containing the tool to fill - trusting that it will be as big as possible without me having to set specific sizes
• I set the max to pixel width at which I feel the flyout become unnecessarily wide

Value / Impact

• Supports displaying wide content in a flyout; specifically, this is a requirement of the new flyout system

Urgency

• Necessary to complete flyout system work for established Obs and Security workflows

Do alternatives or workarounds exist?

• Security has built an entirely custom solution, today, and there are non-Security use cases in Kibana

Additional context (Optional)

• While EuiFlyout accepts custom sizes, the new grouped (parent+child) flyout does not
• If something like fill is made to work with S or M sized flyouts, then we also easily extend to allow the other, non-fill flyout to be any custom size... and not have to manage both parent and child being custom sizes (i.e. support S, fill , M, fill , fill, S , or fill, M)

Designs or Specs (Optional)
Here is a reference branch that demonstrates the described behavior.
Run storybook and find the demo stories under EuiFlyout.