Add flex wrap to metric vis container - #31891

Summary

Fix #26400
As suggested, this PR add a flex-wrap: wrap to wrap metric values on new line if they exceed the available width.
This keep the vertically centered behaviour of single metrics, it wrap multiple metrics on new rows.

However, depending on the value or on the label length, each cell has a different width and will not render as a nice grid (as shown in the second screenshot). Adding a min-width equal to the max-content could be done in a different PR if required (unfortunately this will involves computing the max content size on the first render, and adjust on the second render the size, causing a small flick. A second solution can use external rendering of text , on canvas for example, to compute the width. I'm not aware of any better solution for that case.).

Note for QA

• it was not checked against IE11 because the current master doesn't work with IE

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• This was checked for cross-browser compatibility, including a check against IE11
• [x] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• [ ] Documentation was added for features that require explanation or tutorials
• [ ] Unit or functional tests were updated or added to match the most common scenarios
• [ ] This was checked for keyboard-only and screenreader accessibility

For maintainers

• [ ] This was checked for breaking API changes and was labeled appropriately
• [ ] This includes a feature addition or change that requires a release note and was labeled appropriately