Fixed div related to its parent
<p>I have this snippet, but I need to make the red box be limited to the white box not transpacing.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.main {
  background-color: black;
  width: 100%;
  height: 1250px;
  position: relative;
}

.container{
  display: block;
  position: absolute;
  width: 250px;
  height: 650px;
  background: white;
}

.red-box{
  background: red;
  width: 150px;
  height: 140px;
  position: fixed;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main"&gt;
  &lt;div class="container"&gt;
    &lt;div class="red-box"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>