fluid and width usage

[keul]

Probably generally related to #172

When using the fluid prop with a grid scoped inside a small container I start seeing horizontal scroll.

This because the CSS rules is like the following:

@media only screen and (min-width: 64em)
.fUrYXC {
    width: 61rem;
}

See https://github.com/LoicMahieu/react-styled-flexboxgrid/blob/7f2961b23455466b9888b77f2894223d8fd084ed/src/components/Grid.js#L13:L20

I think that this behavior should copy what other CSS frameworks like Bootstrap are doing for non-fluid layout, so using max-width:

.container, .container-sm {
    max-width: 540px;
}

Workaround

While waiting for a fix I'm using a fixed version of Grid component:

import { Grid as BaseGrid } from 'react-styled-flexboxgrid';
import gridConfig, { DIMENSION_NAMES } from 'react-styled-flexboxgrid/src/config';

const Grid = styled(BaseGrid)`
  ${p => !p.fluid && css`
    ${DIMENSION_NAMES.map(t =>
    gridConfig(p).container[t] && gridConfig(p).media[t]`
        width: 100%;
        max-width: ${p => gridConfig(p).container[t]}rem;
      `
  )}
  `}

[Migggz]

I face the same issue, Thanks for workaround :)

[keul]

Just a random note about my fix above: I'm importing react-styled-flexboxgrid/src. Today I found that this code was not transpiled by my webpack.

That's mean: no working IE 11 (and maybe other).