Long EuiComboBox option causes parent EuiFlexItem to wrap

[jen-huang]

A long EuiComboBox option seems to cause width issues where its parent EuiFlexItem no longer respects the width constraints imposed on it from EuiFlexGrid/EuiFlexGroup.

Here is a CodeSandbox demo using EuiFlexGroups, the first one is with a short option which causes no wrapping issues. The second uses a long option and you can see that the parent EuiFlexItem wraps into a new row:

Example use case in our plugin. For now, I will be fixing this using a calculated max-width on the EuiFlexItem:

[snide]

Thank you for the codesandbox!

This is because the badge it set to a max-width of 100% and the input drops to the second line. Giving the max-width a slightly smaller value, or doing a fancy calc trick against the width of the hidden input will fix it. Shouldn't be too bad to fix.

[cchaos]

@miukimiu Can you take on fixing this one since you were just in that codebase?