[Grid] Fix "auto" behavior to match natural width of its content

[aaronlademann-wf]

• I have followed (at least) the PR section of the contributing guide.

Problem

In #11804, support for the "auto" value was added to props like xs, sm et. al.

This prop value causes the MUI grid to work just like Bootstrap's grid "auto" setting most of the time, with a few exceptions:

1. flex-shrink remains set to 1, which means the item will not always remain sized based on the "natural" width of its contents like users expect.
   • Reduced test case
2. width: 100% is still applied when using the "auto" setting on a nested Grid container items (<Grid container item xs="auto" />), which causes the item to not be sized based on the "natural" width at all.
   • Reduced test case

Proposed Solution

Add flexShrink: 0 and width: auto when a breakpoint size is set to "auto" so that MUI's grid behaves in a way that is truly "auto" - in the sense that it scales to accommodate the natural width of its content.

I realize this constitutes a potentially breaking visual change for consumers, but 5.0 seems like a good time to include it!

Thank you for considering the change!

Preview: https://deploy-preview-27514--material-ui.netlify.app/components/grid/#variable-width-content

[mui-pr-bot]

Details of bundle changes (experimental)

Generated by 🚫 dangerJS against aad40ce

[oliviertassinari]

@aaronlademann-wf Great work, the description and changes have been well structured