Chip element goes full-width in MS Edge

• I have searched the issues of this repository and believe that this is not a duplicate.

When using the Chip element, behavior differs in browser. While in Chrome it has width calculated based on label and avatar, in MS Edge the element is 100% width. I did a CodeSandbox snippet to reproduce it.

Expected Behavior

The Chip should be as narrow as its content, like it does in Chrome

Current Behavior

On MS Edge (versions: Microsoft Edge 41.16299.15.0; Microsoft EdgeHTML 16.16299) the Chip element is full width

Steps to Reproduce (for bugs)

1. CodeSandbox snippet
2. Add a Chip element to App
3. The rendering differs in Chrome and Edge
4. Wrapping Chip with inline-flex container (e.g. Badge or custom div) fixes an issue.

Context

I’m rendering a statistic page, where Avatar shows ID and label displays aggregation data. I show each chip on new line (in a narrow Grid element) so it’s not a big problem, but in this case Avatar is not left-most.

Your Environment

Tech	Version
Material-UI	1.0.0-beta.24
React	16.2
browser	Edge
Microsoft Edge	41.16299.15.0
Microsoft EdgeHTML	16.16299

[IBestuzhev]

@oliviertassinari I discovered this fix as I have some Chips wrapped in Badge. But looks like it works even if applied to Chip itself, without wrapping:

<Chip label="Fix no wrapped" avatar={<Avatar>{3}</Avatar>} style={{display: "inline-flex"}} />

I think it’s OK. The chip element is inline by design, so this solution looks natural.
I hope it does not break other cases.

[IBestuzhev]

I take a look at styles and see that Chip Element has width: fit-content. But intrinsic-width properties are not supported by MS: caniuse and Edge dev site. It’s under consideration with low priority.