Material-ui: [Grid] Browser incompatibility in IE 11

[NiyatiAardhy]

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

Expected Behavior

Grid should be displayed as shown in image https://i.stack.imgur.com/jZBie.png
Here is the code:

        <Grid container direction="column" spacing={0}>
          <Grid item xs={12}>
            <Grid container direction="row" spacing={0}>
              <Grid item xs={6}>
                Logo
              </Grid>
              <Grid item xs={6}>
                FormControl
              </Grid>
            </Grid>
          </Grid>
          <Grid item xs={12}>
            <Grid container direction="column" spacing={0}>
              <Grid item xs={12}>
                <Grid container direction="row" spacing={0}>
                  <Grid item xs={12}>
                    <TextField />
                  </Grid>
                  <Grid item xs={12}>
                    <TextField />
                  </Grid>
                </Grid>
              </Grid>
              <Grid item xs={12}>
                <Grid container direction="row" spacing={0}>
                  <Grid item xs={6}>
                    <TextField />
                  </Grid>
                  <Grid item xs={6}>
                    <TextField />
                  </Grid>
                </Grid>
              </Grid>
            </Grid>
          </Grid>
          <Grid item xs={12}>
            <Grid container direction="row" spacing={0}>
              <Grid item xs={6}>
                Label
              </Grid>
              <Grid item xs={6}>
                Label
              </Grid>
            </Grid>
          </Grid>
        </Grid>

Current Behavior

It is working well in chrome and firefox but in IE 11, everything overlaps and messes up.

Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.18 |
| React | 15.6.2 |
| browser | IE 11, Chrome, Firefox |

[oliviertassinari]

I confirm, I have created a codesandbox: https://codesandbox.io/s/74v3yll34q.

[oliviertassinari]

IE11 has some know limitation with flexbox and flex-direction column. So, the best workaround is to use direction="row". It's working great with such change: https://csb-74v3yll34q-thyspaslmb.now.sh/ and https://codesandbox.io/s/74v3yll34q.

We do our best to support IE11 but it's not a priority. If you find a better solution let us know :).

[NiyatiAardhy]

Thanks for confirming the bug!
While I understand that IE11 is not a priority, I strongly believe that we shouldn't close the bug without a fix as many corporates still rely on IE everyday.
I am not an expert at CSS and finding work-arounds but I found https://goo.gl/TbvUGE, https://goo.gl/7gZACg and https://goo.gl/5UXMD7.
May be they can help?

[oliviertassinari]

@NiyatiAardhy Our implementation of the Grid component is very close to the Bootstrap. Actually, it was used as a starting point. We are already using the Bootstrap fix you shared:
https://github.com/callemall/material-ui/blob/8e15b3a0bc0df02f24f61e2e12b8b2fe8ac63d40/src/Grid/Grid.js#L50