figcaption vertical height of figure?
<p>I have a <code>figure</code> tag, within which I have an <code>img</code> and <code>figcaption</code>.</p>

<p>I am trying to get the width of the <code>figcaption</code> to match the height of the <code>figure</code> (which is variable based on window size, in the was you would perhaps use <code>vh</code> to match the browser height. The reason for this is that I am rotating the <code>figcaption</code> 90degrees, and wish to have the <code>figcaption</code> text centred to the height of the figure.</p>

<p><a href="https://jsfiddle.net/j4fqanfn/" rel="nofollow">Fiddle</a></p>

<p><strong>HTML</strong></p>

<pre><code>&lt;figure&gt;
  &lt;img src="http://placehold.it/350x150"&gt;
  &lt;figcaption&gt;Title&lt;/figcaption&gt;
&lt;/figure&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>figure {
  padding:20px;
  display:block;
  background:#ffa2df;
  position: relative;
}

figure img {
  width: 100%;
  height: auto;
}

figcaption {
  transform: rotate(-90deg);
  transform-origin: 0 0;
  text-align: center;
  background: red;
  position: absolute;
  width: 100%;
  height: 20px;
  display:flex;
  flex-direction: column; 
  float:left; 
}
</code></pre>