title: the React page is not scrollable
body: <p>I am not able to make the page scrollable the code is as given below and i have not used any css i am still a new bee i have used map function to render the components i have sent the data using props                             thats it i am writing this because to fill space and nothing else</p>
  <pre><code>import { SimpleGrid, Flex } from &quot;@chakra-ui/react&quot;;
  import React, { useEffect, useState } from &quot;react&quot;;
  
  import Doccard from &quot;../../components/doccard&quot;;
  import { docdata } from &quot;./docdat&quot;;
  import data from &quot;./docdat.json&quot;;
  import Navbar from &quot;../../components/Navbar&quot;;
  import axios from &quot;axios&quot;;
  
  
  const url1 = &quot;http://localhost:7000/doctors&quot;;
  
  function Doctors() {
    const [docdatai, setdocdatai] = useState([]);
  
    useEffect(() =&gt; {
      axios
        .get(url1)
        .then((Response) =&gt; {
          console.log(Response.data);
          setdocdatai(Response.data);
        })
        .catch((err) =&gt; {
          console.log(&quot;error fetching data&quot;);
        });
      console.log(&quot;fetched&quot;);
    }, []);
  
    return (
      &lt;div className=&quot;scrollable-div&quot; style={{ overflow: &quot;scroll&quot; }}&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        &lt;SimpleGrid columns={[2, 3, 5]} spacing={&quot;20&quot;} mt={4} mx={10}&gt;
          {console.log(docdatai)}
          {docdatai.map((cardinfo, index) =&gt; {
            return (
              &lt;Doccard
                name={cardinfo.name}
                username={cardinfo.username}
                specialization={cardinfo.specialization}
              /&gt;
            );
          })}
        &lt;/SimpleGrid&gt;
      &lt;/div&gt;
    );
  }
  
  export default Doctors;
  </code></pre>