div{
 height: 50vw;
 width: -moz-calc(height);
 width: -webkit-calc(height);
 width: calc(height);
 background:#c7c7c7;
 }

calcHeight cannot be used directly inside. If the height and width are equal, there are the following three methods:

div{
 width:20vw;  /* 20% of Viewport */
 height:20vw;
 background-color:green;
 margin-bottom:20px;
 }

2.

div{
 width:20%;
 padding-top:20%;  /* padding relative to the width of the parent container as a comparison */
 background-color:yellow;
 margin-bottom:20px;
 }

3.

div{
 width: 20%;
 background-color:orange;
 }
 div:before{
 content:'';
 padding:50% 0;  /* padding is 20% relative to Width at this time;  */
 display:inline-block;
 }

Reference:
Demonstration