title: How to use CSS calc() with an element's height
body: <p>I was studying ways to make a hexagon with just CSS, and found a solution that gives me regular hexagons based on the width:</p>
  
  <pre class="lang-css prettyprint-override"><code>.hexagon {
    height: 100%;
    width: calc(100% * 0.57735);
    display: inline-block;
  }
  </code></pre>
  
  <p>However, the code works by generating new rectangles based on the parent element's width. I was searching for a way to calculate the width based on the parent's height.</p>
  
  <p>Is there a way to use an element's height property instead of width for <code>calc()</code>? (I'm not looking into using <code>vh</code> since the nearest parent won't always be the viewport). I googled around and could not find an answer.</p>