JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <style>
      .parent {
        width: 400px;
        height: 400px;
        background: rgba(255, 0, 0, 0.5);
      }
      .me {
        width: 100%;
        height: 100%;
        background: rgba(0, 255, 0, 0.5);
      }
      .child {
        width: 500px;
        height: 500px;
        background: rgba(0, 0, 255, 0.5);
      }
    </style>
  </head>

  <body>
    <div class="parent">
      <div class="me">
        <div class="child"></div>
      </div>
    </div>

    100% takes the parent's width and height not the child's
  </body>
</html>