title: How to make vertical scroll content with FlexBox
body: <p>I am trying to implement a scroll box with flex
  The Box element with the id=scroll is taking the available space and the content is overflowing the Box
  How can i make the Box be overflow=auto and making the content scrollable
  spending hours to understand what is going on with flex
  here is a real example : <a href="https://codesandbox.io/s/flex-with-scroll-2cf9d" rel="nofollow noreferrer">https://codesandbox.io/s/flex-with-scroll-2cf9d</a></p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  import { Box, Grid, CssBaseline } from &quot;@material-ui/core&quot;;
  export default function App() {
    return (
      &lt;Box height=&quot;100vh&quot; flexDirection=&quot;column&quot; display=&quot;flex&quot; bgcolor=&quot;blue&quot;&gt;
        &lt;CssBaseline /&gt;
        &lt;Box p={2}&gt;
          &lt;Grid container spacing={3}&gt;
            &lt;Grid item xs={6}&gt;
              &lt;Box bgcolor=&quot;white&quot;&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
              &lt;/Box&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={6}&gt;
              &lt;Box bgcolor=&quot;white&quot;&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
              &lt;/Box&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
        &lt;/Box&gt;
        &lt;Box flex={1} flexDirection=&quot;column&quot; display=&quot;flex&quot; p={2}&gt;
          &lt;Grid style={{ display: &quot;flex&quot;, flex: 1 }} container spacing={3}&gt;
            &lt;Grid style={{ display: &quot;flex&quot;, flex: 1 }} item xs={6}&gt;
              &lt;Box id='scroll' flex={1} bgcolor=&quot;white&quot;&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
                &lt;div&gt;ssss&lt;/div&gt;
              &lt;/Box&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={6} /&gt;
          &lt;/Grid&gt;
        &lt;/Box&gt;
      &lt;/Box&gt;
    );
  }
  
  </code></pre>