title: Material-ui Snackbar pop up out of Screen
body: <p><a href="https://i.stack.imgur.com/yJDVj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yJDVj.png" alt="screen shot" /></a></p>
  <p>Hi!</p>
  <p>I go on toy project with React, Material-ui.<br/>
  when <b>snack bar</b> or <b>react-toastify</b> pop up.<br/>
  It's not harboring in screen. (RED: scroll up/down then snackbar is there)<br/>
  I changed pop up position top/bottom. but, It can't cover every case.<br/>
  <br/>
  <b>How can it make pop up in screen. (GREEN is showing in screen)<br/>
  I want to SnackBar pop up in &quot;BLUE&quot; position and harboring with scroll.<br/>
  <br/>
  thanks</b></p>
  <pre><code>  &lt;Grid item&gt;
      &lt;Grid container direction=&quot;row&quot; justify=&quot;space-evenly&quot;&gt;
        &lt;Grid item&gt;
          &lt;Button variant=&quot;outlined&quot; onClick={() =&gt; {
            toast.success(&quot;Update!&quot;)
          }}&gt;Update!&lt;/Button&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    &lt;/Grid&gt;
  &lt;ToastContainer position=&quot;top-center&quot; autoClose={2500} /&gt;
  </code></pre>