title: I want my div to be 100% of my parent div using styled component
body: <p>I want my NavDiv styled component to be 100% of my Wrapper styled component but it's not workong as expected. Height can only be set using <strong>px</strong> unit, Units such as <strong>percentage, em, rem</strong> doesn't seems to work</p>
  <pre><code>const Wrapper = styled.div`
      min-width: 100vw;
      min-height: 100vh;
  `
  
  const NavDiv = styled.div`
      border: 1px solid blue;
      position: relative;
      width: 100%; 
      height: 100%;
      font-size: 1rem;
      padding: 4em 2em;
  `
  </code></pre>
  <p>App Component</p>
  <pre><code>const App = () =&gt; {
          return (
              &lt;Wrapper&gt;
                  &lt;Navbar&gt;&lt;/Navbar&gt;
              &lt;/Wrapper&gt;
          )
      }
  </code></pre>
  <p>NavBar component</p>
  <pre><code>const Navbar = props =&gt; {
      return (
          &lt;NavDiv&gt;
              
          &lt;/NavDiv&gt;
      )
  }
  
  </code></pre>