title: Shape made with CSS keeps overflowing parent container
body: <p>I am making a little page and I need to have 2 shapes in the background (screenshot of design attached). I have made them purely with CSS. I've tried both ::before/::after for parent container, and just separate DIV-s in HTML. The problem is that in both cases the bottom right shape always keeps going out of container and the scroll appears. I thought overflow will help, but it didn't do it for me. Could anyone help me fix this?
  Thank you!</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>body {
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: 10%;
  }
  
  .container {
    width: 100%;
    margin: 1.5rem 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
  }
  
  .background-one {
    position: absolute;
    top: 0;
    left: -50%;
    background: linear-gradient(to top, $violet, $magenta);
    width: 375px;
    height: 54%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    z-index: -1;
  }
  
  .background-two {
    position: absolute;
    bottom: 0;
    right: -50%;
    background: hsl(236, 72%, 63%);
    width: 375px;
    height: 54%;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    z-index: -1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="background-one"&gt;&lt;/div&gt;
    &lt;div class="background-two"&gt;&lt;/div&gt;
  
    &lt;div class="container"&gt;
      &lt;div class="phone"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/bretj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bretj.png" alt="What I am trying to achieve without anything overflowing" /></a></p>
  <p><a href="https://i.stack.imgur.com/gFSKz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gFSKz.png" alt="What happens" /></a></p>