title: How to make Material UI modal and dialog scrollable?
body: <p>I have a mui modal where a lot content is to be displayed. When I open the modal, the top content gets cut-off and I am unable to scroll up.
  I have already tried adding {overflow:&quot;scroll&quot;} property to the modal. However, it is't working. This is the code I am currently using:</p>
  <pre><code>  &lt;Modal
      open={viewCreateSegmentModal}
      onClose={() =&gt; handleCreateSegmentModal(false)}
      sx={{ 
      overflow:'scroll',
      height:'100%'}}
    &gt;
      &lt;div style={{overflow:&quot;scroll&quot;}}&gt;
        &lt;CreateSegmentModal
          modalControl={(value) =&gt; handleCreateSegmentModal(value)}
        /&gt;
        &lt;/div&gt;
    &lt;/Modal&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/S7HYG.png" rel="nofollow noreferrer" title="This is how the modal is getting displayed."><img src="https://i.stack.imgur.com/S7HYG.png" alt="This is how the modal is getting displayed." title="This is how the modal is getting displayed." /></a></p>
  <p><a href="https://i.stack.imgur.com/ehfPw.png" rel="nofollow noreferrer" title="This is the top content getting cut-off. If I increase the number of rows under all conditions, the start getting cut-off too."><img src="https://i.stack.imgur.com/ehfPw.png" alt="This is the top content getting cut-off. If I increase the number of rows under all conditions, the start getting cut-off too." title="This is the top content getting cut-off. If I increase the number of rows under all conditions, the start getting cut-off too." /></a></p>
  <p>Any suggestions to how this issue can be resolved?</p>