<Grid container> component receiving width: calc(100% + 16px);

[mrwillis]

Problem description

The <Grid container> component receives these props

.MuiGrid-spacing-xs-16-1335 {
    width: calc(100% + 16px);
    margin: -8px;
}

causing a horizontal scrollbar. See this question for a more accurate example and the (unelegant) fix.

Steps to reproduce

Create an empty project and create one <Grid> with a single item inside. Your page will have a horizontal scroll bar.

Versions

• Material-UI: beta 5
• React: 15.6.1
• Browser: Chrome 60

Proposed solution

Only apply the spacing class and its variants on <Grid> children. I suppose this may be a little inconsistent in the case where you are nesting <Grid> containers, so an alternative could be to just have a prop like applySpacingToContainerOnly={true} (default: false) or something?

[oliviertassinari]

Duplicate of #7466.