title: Why is this React Components overlapping even it's set to position: static or relative 0
body: <p>Just learning React!
  I need help with why this menu overlaps like this image show:<br />
  The red ring, images go under the Menu and there's a horizontal scrollbars but there should not be one.</p>
  <p>See <a href="https://codesandbox.io/s/autumn-meadow-s5yrn?file=/src/Components/albumData.js" rel="nofollow noreferrer">CodeSandbox</a></p>
  <p><a href="https://i.stack.imgur.com/UCM3g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UCM3g.png" alt="enter image description here" /></a></p>
  <p>This is the wrapper for the left Menu and the right MasonryGrid.</p>
  <pre><code>import React from 'react'
  import '../Styles//Components/Wrapper-style.scss'
  import Menu from './Menu'
  const Wrapper = (props) =&gt; {
      return (
          &lt;div className=&quot;wrapper&quot;&gt;
              &lt;div className=&quot;menu-container&quot;&gt;
                  &lt;Menu /&gt;
              &lt;/div&gt;
              &lt;div className=&quot;children-container&quot;&gt;
                  {props.children}
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  export default Wrapper
  </code></pre>
  <p>And this is the SCSS for the Wrapper</p>
  <pre><code>.wrapper{
    display: flex;
    flex-direction: column;
    color: white;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.479);
    .menu-container{
   width: 100%; 
   height: 10%;
    }
    .children-container{
      position: relative;
      height: 85%;
      .content-container{
        &amp;.page-enter {
          opacity: 0;
        }
        &amp;.page-enter-active {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          opacity: 1;
          transition: opacity 600ms ease-in-out;
        }
        &amp;.page-exit {
          opacity: 1;
        }
        &amp;.page-exit-active {
          opacity: 0;
          transition: opacity 600ms ease-in-out;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
        }
      }
    }
  }
  @media(min-width:576px){
    .wrapper {
      flex-direction: row;
      width: 96vw;
      height: 96vh;
      border-radius: 5px;
      .menu-container {
        height: 100%;
        padding: 0;
        min-width: 20%;
        max-width: 20%;
      }
      .children-container {
        height: 100%;
        min-width: 80%;
        max-width: 80%;
      }
    }
  }
  </code></pre>
  <p>Any ides why dies happened would be grate?</p>