title: Display flex is breaking material-ui grid
body: <p>I want to implement grid system from material-ui but facing a problem. Resizing the browser window has no effect on my grid items - they don't resize. I found out that this problem is caused by a parent div which has the style property &quot;display&quot;: &quot;flex&quot;.</p>
  <p>I'm using a material-ui app-bar and drawer. Further I've built a reuseable container component for all the content and childrens. Without the style property &quot;display&quot;: &quot;flex&quot; my whole page style gets broke. So how can I solve this? Any Idea?</p>
  <p>Here is my code and the class root with the property &quot;display&quot;: &quot;flex&quot;</p>
  <h2>Container.tsx</h2>
  <pre><code>return (
          &lt;div className={classes.root}&gt;
              &lt;TopBar /&gt; // Material-UI AppBar
              &lt;Drawer /&gt; // Reuseable Drawer Component
              &lt;main className={classes.contentContainer}&gt;
                  &lt;div&gt;{children}&lt;/div&gt;
              &lt;/main&gt;
          &lt;/div&gt;
      );
  </code></pre>
  <h2>Container Styles</h2>
  <pre><code>const useStyles = makeStyles((theme: Theme) =&gt;
  createStyles({
      contentContainer: {
          flexGrow: 1,
          marginTop: 63,
          position: 'relative',
          backgroundColor: colors.whiteB_8,
          height: `calc(100vh - 63px)`,
          // padding: theme.spacing(3),
          '&amp; &gt; div:first-child': {
              padding: `calc(${theme.spacing(1)}px + 35px)`,
          },
      },
      root: {
          display: 'flex',
      },
  }),
  </code></pre>
  <p>);</p>
  <p>Then I can pass any component to this Container. Here my example component, where I want to have 3 columns inside my content container:</p>
  <pre><code>return (
      &lt;Grid container item xs={12} spacing={2}&gt;
          &lt;Grid item xs={4}&gt;
              &lt;Paper
                  style={{ backgroundColor: 'grey' }}
              &gt;
                  Test
              &lt;/Paper&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={4}&gt;
              &lt;Paper
                  style={{ backgroundColor: 'grey' }}
              &gt;
                  Test
              &lt;/Paper&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={4}&gt;
              &lt;Paper
                  style={{ backgroundColor: 'grey' }}
              &gt;
                  Test
              &lt;/Paper&gt;
          &lt;/Grid&gt;
      &lt;/Grid&gt;
  );
  </code></pre>
  <p>The output looks like this:</p>
  <p><a href="https://i.stack.imgur.com/AswTd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AswTd.png" alt="The output looks like this" /></a></p>
  <p>And the items are not resized:</p>
  <p><a href="https://i.stack.imgur.com/NPLJK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NPLJK.png" alt="enter image description here" /></a></p>
  <p>If I remove &quot;display&quot;: &quot;flex&quot; it looks like this - the content is below the drawer:</p>
  <p><a href="https://i.stack.imgur.com/FrTOa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FrTOa.png" alt="enter image description here" /></a></p>