JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>
    <body>
      <div id="parent">
        <div id="child">
          
        </div>
      </div>
    </body>
</html>

CSS

html, body{
	width: 100%;
	height: 100%;
	margin: 0;
}

#parent {
	width: 100%;
	--parentHeight: 150px; /*doesn't work with 100%, which is how my parent rectangle is defined in my code*/
	height: var(--parentHeight);
	background-color: red;
}

 #child {
   height: 100%;
   width: calc(var(--parentHeight));
   background-color: green;
 }